2013-07-01 24 views
0

我有以下幾點:Jquery droppable與淘汰賽 - 如何從內部取消「下降」?

$(".subject-box").droppable({ 
     // revert: "invalid", 
     activeClass: 'subject-box-active', 
     hoverClass: 'subject-box-hover', 
     accept: ".subject-box, .class-box", 
     tolerance: 'intersect', 
     drop: function (event, ui) { 
      dropItem(ko.dataFor(ui.draggable.context), ko.dataFor(this)); 
      setTimeout(function() { 
       $('#container').isotope('remove', ui.draggable); 
      }, 0); 

     } 
    }); 

所以我接受了CSS類的.subject-box.class-box什麼,然後調用dropItem當物品被丟棄。掉物品開關DROPITEM是在這裏:

var dropItem = function(item, parent) { 
    // do some evaluation of the item (dragged) and parent (accepts item being dragged) 
    // possible cancel based on values of item or parent 
    return; 
}; 

這使我獲得了itemparent對象,所以我可以進行一些評估,這是工作正常,但我需要取消拖放操作,如果父對象的某些屬性真 - 具體來說,認證相關的屬性。

我該如何取消drop:中的放置動作,或給accept:訪問父項和子項以在那裏執行評估?

回答

-1

使用此:

function drop(ev) 
{ 
ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
} 

它會接受你的下落,如果你想取消它,然後在它使用return false

1

設計您的視圖模型如何與您的用戶界面進行交互時需要考慮的一點是使用自定義綁定。這些使您能夠在整個應用程序中以更通用的方式重用這種類型的邏輯,併爲您在此示例中嘗試執行的操作提供更大的靈活性。

我能夠找到這一系列博客文章,其中有人已經開發了一個自定義綁定來處理jQuery UI的拖/放功能:

對於你的情況,你可以做這樣的事情(從上面的源代碼片段)

ko.bindingHandlers.drop = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var dropElement = $(element); 
     var dropOptions = { 
      tolerance: 'pointer', 

      // add whatever other options here 
      accept: function() { 
       // check if the element has the right classes 
       if (!dropElement.hasClass("subject-box") && !dropElement.hasClass("class-box")) { 
        return false; 
       } 
       // get reference to current and parent contexts 

       // contains the parent context of current binding context 
       var parent = bindingContext.$parent; 

       // current context (item) 
       var item = viewModel; 

       // add logic here to determine if item is allowable based on current and parent viewmodels 

      }, 
      drop: function(event, ui) { 
       _hasBeenDropped = true; 
       valueAccessor().value(_dragged); 
       ui.draggable.draggable("option", "revertDuration", 0); 
      } 
     }; 
     dropElement.droppable(dropOptions); 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     var dropElement = $(element); 
     var disabled = !! ko.utils.unwrapObservable(valueAccessor().disabled); 
     dropElement.droppable("option", "accept", disabled ? ".nothing" : "*"); 
    } 
};