javascript - 具有拖动和调整大小功能的动态添加 DIV

Question

var total = 0;

function add() 
{
    total++;
    document.body.innerHTML = document.body.innerHTML + '<div id="'+total+'" class="drag"></div>';
    $('.drag').draggable().resizable();
}

add();
add();
add();

http://jsfiddle.net/zVZFq/631/

我修改的脚本有效（排序），但问题是最后一个 div使用 javascript 函数.drag动态添加到body元素的类add() 替换了sizable()其他 div 的功能与类.drag但不是出于某种原因，它们的draggabble()功能

Answer 1

这有效：

var t = 0;

function add() {

    $('body').append('<div id="d'+t+'" class="drag"></div>');
    $('#d'+t).draggable().resizable();
    t++;
}

这是一个jsfiddle：http: //jsfiddle.net/zVZFq/634/

Answer 2

我知道您已经接受了答案，但是您可以将它们保持通用并使用数组对其进行排序。

var total = 0;
var arr = new Array();
function add() {
    $('body').append('<div class="drag"></div>')
    arr.push($('.drag').eq(total));
    arr[total].draggable().resizable();
    total++;
}

add();
add();
add();

Answer 3

这可能使它工作：

function add() {
       total++;
       var myDiv = document.createElement("div");
       myDiv.setAttribute("id",total); 
       document.body.appendChild(myDiv)

       $('#'+total).draggable().resizable();   
       document.getElementById(total).className += " drag";
}