3

HTML： 

<div class="character_list">
   <div id="draggable" class="character_list_container">
      <div><img  class="1" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img class="2" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img class="3" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img  class="4" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img class="5" src="http://ahna.web44.net//img/charas/13.png" /></div>
      <div><img class="6" src="http://ahna.web44.net//img/charas/13.png" /></div>
   </div>
   <div id="droppable_slots" class="current_team">
      <div id="slot" class="1">1</div>
      <div id="slot" class="2">2</div>
      <div id="slot" class="3">3</div>
   </div>
</div>​

jQuery：

$(function() {
    $("#draggable>div>img").draggable({
        start: function(){
           $(this).css({display: 'none'});
        },
        stop: function(){
           $(this).css({display: 'block'});
        },
        revert: function(dropped) {
           var dropped = dropped && dropped[0].id== "slot";
           if(!dropped) {
              $(this).appendTo($(this).data('originalParent'))
            }
            return !dropped;
        },
        helper: function() { return $(this).clone().appendTo('body').show(); },
        containment: '.sel_screen_left'
}).each(function() {
    $(this).data('originalParent', $(this).parent())
});

$("#droppable_slots>div").droppable({
    drop: function(event, ui) {

        var $this = $(this);
    var content = $.trim($this.html()).length;
    if(content > 0) {
    $this.html("");
    }
        $this.append(ui.draggable);    

        var width = $this.width();
        var height = $this.height();
        var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
        var cntrTop = (height / 2) - (ui.draggable.height() / 2);

        ui.draggable.css({
            left: cntrLeft + "px",
            top: cntrTop + "px"
        });

}
});
});​

実例： http： //jsfiddle.net/CVbzg/3/

jsfiddleの例でわかるように、画像がドロップされると完全にロックされますが、ドロップゾーンから移動すると、元の親に戻して追加するのではなく、ドラッグ可能性が失われます。

誰かが助けることができますか？

4

1 に答える 1

2

ドロップ可能なものをドロップターゲットに配置した後で少し動かすと、ドラッグ可能性が失われます。これは、

$this.html("");

ドロップハンドラーでは、ドラッグ可能なオブジェクトはまだドロップターゲット内にあります。ドロップターゲットのHTMLを消去すると、再追加されるはずの要素も削除されます。これは、要素が存在しなくなったために構文エラーを返します。これにより、操作が中断され、クローンがそこに残り、ドラッグ可能なオブジェクトが消去されます。

簡単な修正は次のとおりです。

drop: function(event, ui) {

    var $this = $(this);
    if ($this.find('.ui-draggable').length) return; //don't overwrite occupied spot
    $this.empty(); //empty() sounds more semantic than html('') for me, it does the same thing =]
    $this.append(ui.draggable);
    //...
}

フィドル

ドロップターゲット内のドロップされた要素を別の要素で上書きすることはできません。これには、独自のドロップターゲットでの要素の再ドロップが含まれます。

別の解決策は、ドロップされているドラッグ可能オブジェクトを追加する前に、すでにドロップされているドラッグ可能オブジェクトを開始位置に戻すことです。

drop: function(event, ui) {
    var $this = $(this),
        containsDropped = $this.find('.ui-draggable');
    if (containsDropped.length) containsDropped.appendTo(containsDropped.data('originalParent'));
    $this.empty();

フィドル

ドラッグ可能なものを意図せずに消去しないように注意する必要があります。=]

于 2013-01-05T03:09:48.513 に答える