jquery-ui - 动态添加 jquery 可排序元素后，拖动并调整元素大小并获取 jquery 中的位置

Question

我已经成功添加了动态元素，但它是可排序的，我希望添加的动态元素应该是可拖动和可调整大小的。

我已经从这里复制了工作演示。我只想保存用户将添加的添加元素的顶部、左侧、高度和宽度像素值。我尝试了几种方法，但这对我没有帮助。

/* didn't worked */
$(".new_element_class").draggable({
  cursor: "move",
  drag : function(event, ui){
    $('#for_drag').html('Dragging Element! left : ' + Math.floor(ui.position.left) + 'Top : ' + Math.floor(ui.position.top));
   }
});
$('.new_element_class').resizable({
   handles : "n,s,w,e,ne,se,sw,nw",
   // maxHeight : 90,
   // maxWidth : 215,
   minWidth : 215,
   minHeight : 30,
   helper: "ui-resizable-helper",
   animate: true,
   start : function(event, ui){
      $('#for_resize').html('Resizeing Element! Width :  ' + Math.floor(ui.size.width) + ' Height : ' + Math.floor(ui.size.height));
   },
   stop : function(event, ui){
      $('#for_resize').html('Resizeing Element! Width :  ' + Math.floor(ui.size.width) + ' Height : ' + Math.floor(ui.size.height));
   },
   resize : function(event, ui){
      $('#for_resize').html('Resizeing Element! Width :  ' + Math.floor(ui.size.width) + ' Height : ' + Math.floor(ui.size.height));
   },
});
/* didn't worked */

此外，我想为选择框、单选按钮和复选框动态添加更多选项，其中包含动态内容，如values 和 innerHTML。我只尝试了选择框输入字段的jquery 和 javascript方法，但它添加了第一个元素，

例如：如果我添加了两个选择框输入并且我想为第二个选择框添加更多选项，它正在为第一个添加。

我试过这个 Jquery 代码

var select_id = "#select_name_"+rand_no;
var option_id = "#option_adder"+rand_no;
$(select_id).live('click', function(){
    name = $(this).text();
    if($("#" + name).length == 0) {
       $(option_id).click(function(){
           $(select_id)
           .find('option')
           .end()
           .append('<option value="whatever">text</option>')
           .val('whatever');
       });
    } else {
       alert('this record already exists');
    }
});

我也试过这个 Javascript 代码

var select_id = "select_name_"+rand_no; // for javascript
var option_id = "option_adder"+rand_no; // for javascript

var min1 = 0,
    min2 = 0,
    max = 100,
    select_id_obj = document.getElementById(select_id),
    option_id_obj = document.getElementById(option_id);

function dataadder(id){
    if(id == option_id_obj){
        min1++;
        var opt = document.createElement('option');
        alert(opt);
        opt.value = 'data is '+min1;
        opt.innerHTML = 'data is '+min1;

        select_id_obj.appendChild(opt);
    }
}

这是我的小提琴代码。

有人可以帮我弄这个吗？？

标签： jquery-uijquery-ui-sortablejquery-ui-draggablejquery-ui-droppablejquery-ui-resizable