Question

我有jQuery UI可拖动和可调整大小的工作。我正在使用onClick函数按钮在我的另一个div（#canvas）中创建一个div。可拖动的工作在我静态添加的div上，但它不适用于附加onClick函数的div。知道为什么吗？

JS

// Draw rectangle
function drawRect(){
    var rectangle = document.createElement('div');
    rectangle.className = 'rectangle ui-draggable ui-resizable ui-selectable';
    rectangle.style.width = "200px";
    rectangle.style.height = "200px";
    rectangle.style.position = "absolute";

    // Define resize handles
    var n = document.createElement('div');
    n.className = 'ui-resizable-handle ui-resizable-n';
    var e = document.createElement('div');
    e.className = 'ui-resizable-handle ui-resizable-e';
    var s = document.createElement('div');
    s.className = 'ui-resizable-handle ui-resizable-s';
    var w = document.createElement('div');
    w.className = 'ui-resizable-handle ui-resizable-w';

    // Build resize handles
    rectangle.appendChild(n);
    rectangle.appendChild(e);
    rectangle.appendChild(s);
    rectangle.appendChild(w);

    // Build div
    document.getElementById("canvas").appendChild(rectangle);
}

jQuery Bind

jQuery(function($) {

    // Make boxes draggable
    $('.rectangle').draggable();

    // Make elements resizable
    $('.rectangle').resizable({

    // Set custom resize handles
    handles: {'n': '.ui-resizable-n', 'e': '.ui-resizable-e', 's': '.ui-resizable-s', 'w': '.ui-resizable-w' },

    // Recalculate dimensions from pixels to percentages
    stop: function(e, ui) {
      var parent = ui.element.parent();
      ui.element.css({
          width: ui.element.width()/parent.width()*100+"%",
          height: ui.element.height()/parent.height()*100+"%"
      });
    }
});

HTML

<div id="canvas">
    <div class="rectangle ui-draggable ui-resizable ui-selectable"></div>
</div>

<button onClick="drawRect();">click here</button>

Answer 1

动态添加的元素不会被jQuery监视，而您在新添加的元素上调用draggable和resizable会尝试此操作。

function drawRect(){
    var rectangle = document.createElement('div');
    rectangle.className = 'rectangle ui-draggable ui-resizable ui-selectable';
    rectangle.style.width = "200px";
    rectangle.style.height = "200px";
    rectangle.style.position = "absolute";

    // Define resize handles
    var n = document.createElement('div');
    n.className = 'ui-resizable-handle ui-resizable-n';
    var e = document.createElement('div');
    e.className = 'ui-resizable-handle ui-resizable-e';
    var s = document.createElement('div');
    s.className = 'ui-resizable-handle ui-resizable-s';
    var w = document.createElement('div');
    w.className = 'ui-resizable-handle ui-resizable-w';

    // Build resize handles
    rectangle.appendChild(n);
    rectangle.appendChild(e);
    rectangle.appendChild(s);
    rectangle.appendChild(w);

    // Build div
    document.getElementById("canvas").appendChild(rectangle);


$('.rectangle').draggable();

    // Make elements resizable
    $('.rectangle').resizable({

    // Set custom resize handles
    handles: {'n': '.ui-resizable-n', 'e': '.ui-resizable-e', 's': '.ui-resizable-s', 'w': '.ui-resizable-w' },

    // Recalculate dimensions from pixels to percentages
    stop: function(e, ui) {
      var parent = ui.element.parent();
      ui.element.css({
          width: ui.element.width()/parent.width()*100+"%",
          height: ui.element.height()/parent.height()*100+"%"
      });
    }

}

jQuery UI无法动态创建DOM元素？

1 个答案: