我正在试图弄清楚如何使动态创建的div可拖动,所以我创建了this very simple thing来帮助我。我知道我必须使用非动态处理程序的on()事件。通过让body元素处理链接的JSfiddle中的克隆事件,我成功地使动态创建的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();
});
答案 0 :(得分:17)
在创建时将类“draggable”或id放在元素中。 (你没有上课)然后代码应该工作
$('.container').append($("<div class='bl pink draggable'></div>"));
$('.draggable').draggable()
答案 1 :(得分:9)
我会做this
之类的事情我将元素添加到容器后调用draggable
方法,如下所示:
$("<div class='bl pink'></div>").appendTo('.container').draggable();
答案 2 :(得分:4)
我遇到了同样的问题。接受的答案肯定有效,但我一直在寻找更清洁,更集中的解决方案。我不想在我的脚本插入新元素的每个地方显式调用.draggable()。
我确定的是在父元素上侦听DOM插入,然后在插入的子元素上应用.draggable()。例如:
$("#Parent").on("DOMNodeInserted", ".ChildClass", function() { $(this).draggable(); });
查看这个小提琴演示:http://jsfiddle.net/9hL7u95L/
答案 3 :(得分:3)
将可拖动的类添加到动态添加的元素中。
$(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();
});
});
答案 4 :(得分:3)
你可以通过以下方式实现:
$(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();
});
答案 5 :(得分:3)
我已经为你的小提琴添加了一些内容,希望它会有所帮助:http://jsfiddle.net/m3BXZ/8/
基本上我已经创建了一个名为startDrag的函数,它使新块可以拖动:
function startDrag(){
$(".bl").draggable();
}
有很多方法可以帮助您找到最适合您的解决方案。
答案 6 :(得分:2)
使用
$("<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();
});
答案 7 :(得分:0)
尝试这个(示例):
$('.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);
});