4

ユーザーがクリック (ホールド) したときにボックスのクローンを作成する必要があり、そのクローンをドラッグ可能にする必要があるボックスがあります。次に、ユーザーは複製された赤いボックスをブラック ボックスに移動してドロップします。私は JQuery 1.9.1 と JQuery UI を使用していますが、まだこれを正しく行うことができないようです。誰か助けてくれませんか？

ここにjsFiddleがあります

HTML

<div id='main'>
    <div id='left'>
      <div id='box'></div>
    </div>
    <div id='right'>
        <div id='thespace'>Place in here</div>
    </div>
</div>

Jクエリ

$(document).ready(function() {
    $('#box').draggable({helper: "clone"});
    $('#box').bind('dragstop', function(event, ui) {
        $(this).after($(ui.helper).clone().draggable().css('z-index','99999'));
    });
});

ここにjsFiddleがあります

4

2 に答える 2

3

JavaScript:

$('.box').draggable({
    helper: "clone"
}).on('dragstart', function (e, ui) {
    $(ui.helper).css('z-index','999999');
}).on('dragstop', function (e, ui) {
    $(this).after($(ui.helper).clone().draggable());
});

CSS:

.box{width:100px;height:100px;background-color:red;left:50px;top:50px;}

ID をクラスに変更しました。要素を複製すると、同じ ID を持つ赤い四角がたくさんできてしまい、まったく良くないためです。また、最初の四角の絶対位置を削除しました。これは、クローンに影響を与えたためです...

ワーキング JSFiddle デモ

于 2013-06-19T13:45:09.127 に答える
2

ここに実用的なソリューションがありますが、それが最適かどうかはわかりません。現在のボックスを新しいコンテナーに追加し、クローンを元の位置に追加して、リスナーを再バインドします。

var dragConfig = {
        start: function(){
            initialBox = $(this).clone();
            initialBox.draggable( dragConfig );
        },
        stop: function(){
            $(this).appendTo("#"+currentHoverID);
            initialBox.appendTo("#left");
        }
    };

jsfiddle の作業: http://jsfiddle.net/WEtr4/3/

于 2013-06-18T23:47:02.230 に答える