Question

当我点击并附加一个新的div调用block2时，可拖动的拖动＆amp;停止不工作？

如何解决？

HTML

<div id="btn"><input name="click" type="button" value="Click" /></div>
<div class="block1" style=" width:100px; height:100px; background:orange;">I am Block1</div>

JS

$('#btn').click(function(){
    var $newDiv=$('<div class="block2" style=" width:100px; height:100px; background:green;">I am Block2</div>');
    $( "#btn").parent().append($newDiv);

});


$('.block1').draggable({

            drag: function() {
                $('.block1').text('Drag Now!');
            },
            stop: function() {
                $('.block1').text('Stop Now!');
            }

        });



$('.block2').draggable({

            drag: function() {
                $('.block2').text('Drag Now!');
            },
            stop: function() {
                $('.block2').text('Stop Now!');
            }

        });

Answer 1

你应该试试这个，因为'block2'类div不存在于dom中，所以代码将无法向其添加draggable。因此，在将“block2”添加到DOM之后，您应该在其上调用draggable。然后它会像你一样工作。

$('#btn').click(function(){
    var $newDiv=$('<div class="block2" style=" width:100px; height:100px; background:green;">I am Block2</div>');
    $( "#btn").parent().append($newDiv);

    $('.block2').draggable({
         drag: function() {
             $('.block2').text('Drag Now!');
         },
         stop: function() {
             $('.block2').text('Stop Now!');
         }
    });

});

检查此 DEMO

Answer 2

问题是添加它时附加的DOM元素不是“实时”，因此从未应用draggable方法。这段代码很有用。

function drag(e) {
    $(e.target).text('Drag Now!');
}
function stop(e) {
    $(e.target).text('Stop Now!');
}

$('#btn').click(function(){
    var newDiv = $('<div class="block2" style=" width:100px; height:100px; background:green;">I am Block2</div>');
    $(newDiv).appendTo($(this).parent()).draggable({drag: drag, stop: stop});
});

$('.block1').draggable({drag: drag, stop: stop});

由于您的drag和drop方法相同，因此重复使用它们会更有意义。

Answer 3

更加清晰的解决方案是在追加完成后调用可拖动的函数。

$('#btn').click(function(){
    var newDiv = $('<div class="block2" >Block2</div>');
    $(newDiv).appendTo($(this).parent());

    $('.block2').draggable();
});

通过这种方式，你可以在goest live之后将所有功能拖动和停止应用到它。

jQuery~draggable函数在append对象中不起作用

3 个答案: