jQueryUI的 - 只有一個投擲的同時

Question

我使用jQueryUI爲draggable和droppable。

如果我放棄在可投放區域一個元素，如果再嘗試刪除第二個對象。首先丟棄的元素應該自動移除並移動到可拖動區域。

Basically, only one element should be in droppable area.

Here fiddle demo

只要可投放區域具有多於1個元素。它應該刪除最後一個元素。如果再添加一個元素。可丟棄區域的對象不能超過1個。

代碼：

$("#dvSource img").draggable({ 
    revert: "invalid", 
    //refreshPositions: true, 
    drag: function (event, ui) { 
     ui.helper.addClass("draggable"); 
    }, 
    stop: function (event, ui) { 
     ui.helper.removeClass("draggable"); 
     if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) { 
       console.log($("#dvDest img").length); 
     } 
     else { 
      //alert(image + " not dropped."); 
     } 
    } 
}); 
$("#dvDest").droppable({ 
    drop: function (event, ui) { 
     if ($("#dvDest img").length == 0) { 
      $("#dvDest").html(""); 
     } 
     ui.draggable.addClass("dropped"); 
       $("#dvDest").append(ui.draggable); 
    } 
}); 

Answer 1

我不是用精彩的動畫，但在這裏是爲了做這件事。

工作實例：https://jsfiddle.net/Twisty/6auhhjxc/5/

jQuery的

$(function() { 
    $("#dvSource img").draggable({ 
    revert: "invalid", 
    drag: function(event, ui) { 
     ui.helper.addClass("draggable"); 
    }, 
    stop: function(event, ui) { 
     ui.helper.removeClass("draggable"); 
     if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) { 
     console.log($("#dvDest img").length); 
     } 
    } 
    }); 
    $("#dvDest").droppable({ 
    drop: function(event, ui) { 
     if ($("#dvDest img").length === 0) { 
     $("#dvDest").html(""); 
     } else { 
     $("#dvDest img:first").hide(600, function() { 
      $(this).appendTo("#dvSource"); 
     }).show(600); 
     } 
     ui.draggable.addClass("dropped"); 
     $("#dvDest").append(ui.draggable); 
    } 
    }); 
}); 

在下降，你已經有一個很好的檢驗。因此，如果drop中的目標中有img個元素，則需要添加該下拉列表，然後將第一個元素附加回源。

我加了一些簡單的.hide()和.show()動畫，使其看上。我還調整了每張圖片，以便您可以看到正確的項目正在向後移動。

我懷疑有辦法動畫以某種方式迴歸，這只是不是我的錦囊。但是，如果這是你的包，這應該讓你在那裏。評論後

更新

工作實例：https://jsfiddle.net/Twisty/6auhhjxc/7/

我在不停地拋出一個錯誤，您可拖動代碼中發現的問題。我刪除它。

因爲我們破壞/遍地創建拖拽元素，我做了一個函數來幫助做到這一點。拖放添加了一堆樣式來保留位置，所以我將img傳回到源代碼時將其刪除，然後再刪除。

jQuery的

function makeDrag(el) { 
    // Pass me an object, and I will make it draggable 
    el.draggable({ 
    revert: "invalid" 
    }); 
} 
$(function() { 

    makeDrag($("#dvSource img")); 

    $("#dvDest").droppable({ 
    drop: function(event, ui) { 
     if ($("#dvDest img").length === 0) { 
     $("#dvDest").html(""); 
     } else { 
     $("#dvDest img:first").hide(600, function() { 
      $(this).removeAttr("class"); 
      $(this).removeAttr("style"); 
      $(this).appendTo("#dvSource"); 
     }).show(600, function() { 
      makeDrag($(this)); 
     }); 
     } 
     ui.draggable.addClass("dropped"); 
     ui.draggable.draggable("destroy"); 
     $("#dvDest").append(ui.draggable); 
    } 
    }); 
}); 

在stop的代碼是造成一個問題：

if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) { 
    console.log($("#dvDest img").length); 
} 

我切換到無壓縮版本，並拋出的錯誤是：

TypeError: draggable is undefined

$.each(($.ui.ddmanager.droppables[ draggable.options.scope ] || []).slice(), ...

這段代碼段S：

$.each(($.ui.ddmanager.droppables[ draggable.options.scope ] || []).slice(), function() { 

     if (!this.options) { 
      return; 
     } 
     if (!this.options.disabled && this.visible && $.ui.intersect(draggable, this, this.options.tolerance, event)) { 
      dropped = this._drop.call(this, event) || dropped; 
     } 

     if (!this.options.disabled && this.visible && this.accept.call(this.element[ 0 ], (draggable.currentItem || draggable.element))) { 
      this.isout = true; 
      this.isover = false; 
      this._deactivate.call(this, event); 
     } 

    }); 

在最小化的代碼，這是t，但問題是一樣的。當你通過ui.helper.data("draggable")到$.ui.ddmanager.drop()，該值是null或undefined。原因在於，在您的腳本範圍內，ui.helper沒有data-draggable屬性。

再次，這是不明確意圖動作是什麼在那裏，所以我乾脆刪除它。