1

私はjQuery UIのドラッグ可能でサイズ変更可能な作業をしています。ボタンの onClick 関数を使用して、別の div (#canvas) 内に div を作成しています。Draggable は、静的に追加した 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バインド

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>
4

1 に答える 1

4

動的に追加された要素は、呼び出した 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+"%"
      });
    }

}
于 2013-10-27T09:52:27.067 に答える