動的に作成されたdivをドラッグ可能にする方法を理解しようとしているので、 これは非常に簡単なこと を作成して支援します。非動的ハンドラーでon()イベントを使用する必要があることを理解しています。リンクされたJSfiddleでbodyイベント要素が複製イベントを処理するようにすることで、動的に作成されたdivをクローン可能にすることに成功しましたが、ドラッグできません。何が悪いのですか?
よろしくお願いします!
$(document).ready(function () {
$("body").on('click', '.pink', function () {
$('.container').append($("<div class='bl pink'></div>"))
});
$("body").on('click', '.blue', function () {
$('.container').append($("<div class='bl blue'></div>"))
});
$("body").on('click', '.coral', function () {
$('.container').append($("<div class='bl coral'></div>"))
});
$(".draggable").draggable();
});
作成時に、クラスに「ドラッグ可能」またはIDを要素に入れます。 (あなたはクラスを入れていません)そしてコードはうまくいくはずです
$('.container').append($("<div class='bl pink draggable'></div>"));
$('.draggable').draggable()
私は this のようなことをします
次のように、コンテナに要素を追加した後、draggable
メソッドを呼び出します。
$("<div class='bl pink'></div>").appendTo('.container').draggable();
私も同じ問題を抱えていました。受け入れられた答えは確かに機能しますが、私はよりクリーンで集中化されたソリューションを探していました。スクリプトが新しい要素を挿入するすべての場所で.draggable()を明示的に呼び出したくありませんでした。
私が解決したのは、親要素のDOM挿入をリッスンし、挿入された子に.draggable()を適用することでした。例えば:
$("#Parent").on("DOMNodeInserted", ".ChildClass", function() { $(this).draggable(); });
このフィドルのデモを確認してください: http://jsfiddle.net/9hL7u95L/
使用する
$("<div class='bl blue'></div>").draggable().appendTo($('.container'));
$(document).ready(function () {
$('.container').on('click', '.pink', function () {
$("<div class='bl blue'></div>").draggable().appendTo($('.container'));
});
$('.container').on('click', '.blue', function () {
$("<div class='bl blue'></div>").draggable().appendTo($('.container'));
});
$('.container').on('click', '.coral', function () {
$("<div class='bl coral'></div>").draggable().appendTo($('.container'));
});
$(".draggable").draggable();
});
動的に追加された要素にドラッグ可能なクラスを追加します。
$(document).ready(function () {
$("body").on('click', '.pink', function () {
$('.container').append($("<div class='bl pink draggable'></div>"));
$(".draggable").draggable();
});
$("body").on('click', '.blue', function () {
$('.container').append($("<div class='bl blue draggable'></div>"));
$(".draggable").draggable();
});
$("body").on('click', '.coral', function () {
$('.container').append($("<div class='bl coral draggable'></div>"));
$(".draggable").draggable();
});
});
あなたはそれを以下の方法で行うことができます:
$(document).ready(function () {
$('.container').on('click', '.pink', function () {
$('.container').append($("<div class='bl pink draggable'></div>"));
$('.draggable').draggable();
});
$('.container').on('click', '.blue', function () {
$('.container').append($("<div class='bl blue draggable'></div>"));
$('.draggable').draggable();
});
$('.container').on('click', '.coral', function () {
$('.container').append($("<div class='bl coral draggable'></div>"));
$('.draggable').draggable();
});
$('.draggable').draggable();
});
私はあなたのフィドルにいくつかのビットを追加しましたがうまくいけばそれは助けになります: http://jsfiddle.net/m3BXZ/8/
基本的に、Iveは新しいブロックをドラッグ可能にするstartDragという関数を作成しました。
function startDrag(){
$(".bl").draggable();
}
これを行うには多くの方法があり、どのソリューションが最適かを見つけるだけです。
これを試してください(例):
$('.btn-hotspot-add').click(function(){
//Create element and append draggable action
var element = $('<span class="hotspot"></span>').draggable({
'containment': "parent",
'stop': function(Elm){
//Sample stop action
var parentWith = Elm.target.offsetParent.offsetWidth;
var parentHeight = Elm.target.offsetParent.offsetHeight;
var x = Elm.target.offsetLeft;
var y = Elm.target.offsetTop;
console.log(parentWith+'x'+parentHeight+' - '+x+'x'+y );
}
});
//Append draggable element to parent container
$('#parent').append(element);
});