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/

我修改的脚本有效（sorta），但问题是使用javascript函数.drag body元素的类add()的最后一个div >替换其他div的sizable()功能与类.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

这可能会起作用：

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

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

Answer 3

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

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();

动态添加DIV，同时具有拖动和调整大小功能

3 个答案: