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に存在しないため、これを試す必要があります。そのため、コードはドラッグ可能を追加できません。したがって、DOMに「block2」を追加した後、その上でドラッグ可能を呼び出す必要があります。その後、それはあなたのアスペクトとして機能します。

$('#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 に答える