1

当我单击并附加一个新的 div 调用 block2 时，可拖动的拖动和停止不起作用？

怎么解决？？

演示：http: //jsfiddle.net/hbGkN/1/

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!');
            }

        });
4

3 回答 3

3

你应该试试这个，因为 'block2' 类 div 不存在于 dom 中，所以代码将无法向其添加可拖动对象。因此，在将“block2”添加到 DOM 之后，您应该在其上调用可拖动对象。然后它会在你的方面起作用。

$('#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!');
         }
    });

});

检查这个演示

于 2012-10-22T13:11:10.410 回答
1

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

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

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

这样你就可以在它上线后应用所有的拖动和停止功能。

于 2017-08-03T16:03:58.447 回答
0

问题是附加的 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方法是相同的，因此重用它们更有意义。

于 2012-10-22T13:54:16.397 回答