javascript - drop - sortable js




jQuery拖放-檢查droppable外部的drop (4)

如果在另一個問題中回答這個問題,我很抱歉,我無法找到特定問題的答案!

我正在嘗試測試jQuery draggable是否被丟棄在合法的dropable之外。 這通常會通過恢復拖動來解決90%的時間,但我不想這樣做。 相反,我想做一件事,如果draggable被放到一個droppable(工作得很好!),以及其他東西,如果它被丟棄在所有可能的droppables之外(目前讓我變得更好!)。

簡而言之:

jQuery('#droppable').droppable(
{
    accept: '#draggable',
    drop: function(event, ui)
    {
        // awesome code that works and handles successful drops...
    }
});

jQuery('#draggable').draggable(
{
    revert: false,
    stop: function()
    {
        // need some way to check to see if this draggable has been dropped
        // successfully or not on an appropriate droppable...
        // I wish I could comment out my headache here like this too...
    }
});

我覺得我錯過了一些非常明顯的東西...提前感謝任何幫助!


以下示例的優點是您無需更改或了解可放置代碼:

可拖動的revert屬性可以具有函數(值){}。 值作為參數傳遞,指示輔助函數是否被放置到元素(drop元素)上,如果沒有放在元素上,則返回“false”(放在外面或不被接受)。

注意:您需要從該恢復函數返回正確的bool值,以告訴幫助程序是否還原(true / false)。 True表示是,通過慢速移動(開箱即用)將幫助器移回原始位置。 False表示不,只是刪除助手。 將revert屬性設置為'invalid'是一種說法的捷徑

  • '是的,如果掉到外面,那就回复幫手'
  • '不,如果放在一個可放置的元素上並被接受,那麼立即殺死幫助者'。

我的猜測是你可以在啟動事件期間將當前ui幫助器添加到具有data屬性的可拖動容器中。 然後從data屬性中的revert函數中獲取它。 然後向助手添加一個屬性,指示它是否被刪除。 然後最終在stop事件中,檢查此數據屬性值,並執行您的預期。

可拖動的事件/函數調用順序:start-revert-stop

這可能是一個例子:

jQuery('#draggable').draggable(
{
    start: function(event, ui) {
        $(this).data('uihelper', ui.helper);
    },
    revert: function(value){
        var uiHelper = (this).data('uihelper');
        uiHelper.data('dropped', value !== false);
        if(value === false){
             return true;
        }
        return false;
    },
    stop: function(event, ui)
    {
        if(ui.helper.data('dropped') === true){
            // handle accordingly...
        }
    }
});

您甚至可以在還原函數中返回true,而只是在stop事件期間刪除幫助程序,具體取決於使用ui.helper.remove()的數據('dropped')值。 或者如果你還有糟糕的一天,你甚至可以使用CSS3將其爆炸;)


嘗試使用droppable元素的“out”事件。

這是documentation

“當一個被接受的拖拽被拖出(在容差範圍內)這個可投放的時候,就會觸發這個事件。” 如果我是對的,這就是你需要的。

還可以在整個頁面上創建元素覆蓋。 如果元素被丟棄,那麼你可以觸發你的事件。 不是最好的,但我認為這是唯一的方法。 因為您需要一些其他“可放置”項來觸發這些事件。


我添加了我採用的解決方案,因為您可以從正在移動的對象的css類中輕鬆地理解這一點:

jQuery('#draggable').draggable({
  stop: function(event, ui) {
    if (ui.helper.hasClass('ui-draggable-dragging')) {
      console.log('dropped out');
    } else {
      console.log('dropped successfully');
    }
  }
});

我看到你已經得到了答案; 無論如何我今天遇到同樣的問題,我這樣解決了:

var outside = 0;

// this one control if the draggable is outside the droppable area
$('#droppable').droppable({
    accept      : '.draggable',
    out         : function(){
        outside = 1;
    },
    over        : function(){
        outside = 0;
    }
});

// this one control if the draggable is dropped
$('body').droppable({
    accept      : '.draggable',
    drop        : function(event, ui){
        if(outside == 1){
            alert('Dropped outside!');
        }else{
            alert('Dropped inside!');
        }
    }
});

我需要它,因為我無法更改我的draggables的選項,所以我只能使用droppables(我需要在真棒的FullCalendar插件中)。 我認為使用droppables的“貪婪”選項可能會遇到一些問題,但在大多數情況下它應該可以使用。

PS:抱歉我的英語不好。

編輯:正如所建議的,我使用jQuery.data創建了該版本; 它可以在這裡找到: jsfiddle.net/Polmonite/WZma9/

無論如何jQuery.data文檔說:

請注意,此方法目前不提供跨XML平台支持,因為Internet Explorer不允許通過expando屬性附加數據。

(意思是它在8之前的IE上不起作用)

編輯2:如@Darin Peterson所述,之前的代碼不適用於多個丟棄區域; 這應該解決這個問題: http://jsfiddle.net/Polmonite/XJCmM/http://jsfiddle.net/Polmonite/XJCmM/

編輯3:編輯2的示例有一個錯誤。 如果我拖動“拖我!” 到底部可放置,然後將“拖我也”放到上面的droppable然後在外面放下“拖我”,它會警告“掉進去!” 所以,不要使用它。

編輯4:如@Aleksey Gor所述,編輯2中的例子是錯誤的; 實際上,它更像是一個例子來解釋如何遍歷所有draggables / droppables,但我實際上忘了刪除警報消息,所以這很令人困惑。 Here更新了小提琴。





jquery-ui-droppable