禁用后启用一个可放置对象

问题描述

我有一个类似的问题，例如这个SO问题.我有一个overflow: scroll的div，里面有droppables.如果可拖动对象下降到div以下，则可触发对象仍会触发.该问题的解决方案确实防止了这种情况的发生.但是，我有一个div低于我的第一个div的区域.该解决方案也阻止了我放下第二个droppable.

Im having a simulair problem as this SO question. I have a div with overflow: scroll with droppables inside. If a draggable drops below the div, the droppable still triggers. The solution from that question does prevent that to happen. However, I have another div with droppables below my first div. That solution prevents me to drop on my 2nd droppable too.

因此，我不得不对其进行一些修改，而不是将check on drop事件放到了droppable的over事件上.如果droppable隐藏，我将其禁用.这使得第2个Droppable可以工作，但是Im无法重新启用该Droppable以供将来使用.香港专业教育学院试图使用droppable的out事件，但我猜我禁用droppable时也会禁用它，因为它不会触发.禁用Droppable后如何启用它?还是有更好的方法来做到这一点?

So I had to modify it a bit, and instead of putting the check on drop event, I put it on the over event on the droppable. If the droppable is hidden, I disable it. This makes the 2nd droppable to work, but Im having trouble to re-enable the droppable for future use. Ive tried to use out event of droppable but I guess it gets disable too when I disable the droppable, since it doesnt trigger. How can I enable the droppable after it has being disable? Or is there a better way to do this?

$('.droppable').droppable({            
         over: function(event, ui) {
            var myOverflowObj = $(this).closest(".module, #process-window");

            if (myOverflowObj.length) {

                var cTop = myOverflowObj.position().top + parseInt(myOverflowObj.css("margin-top"));
                var cBtm = myOverflowObj.position().top + parseInt(myOverflowObj.css("margin-top")) + myOverflowObj.height();
                var dTop = $(this).position().top + parseInt($(this).css("margin-top"));
                var dBtm = $(this).position().top + parseInt($(this).css("margin-top")) + $(this).height();

                if ((dBtm > cTop && dTop < cBtm) == false) {
                    $(this).droppable("option", "disabled", true);
                }
            }
        },
        out: function(event, ui) {
            $(this).droppable("option", "disabled", false);           
        }
});

推荐答案

我设法通过使用可拖动对象的stop事件重新启用那些已禁用的可放置对象来解决此问题.

I manage to do a work around, with using the stop event of the draggable object to re-enable those droppables that have been disabled.

$('.draggable').draggable({     
    stop: function() { 
        $.each($('.droppable.ui-state-disabled'), function(index, value) { 
            $(this).droppable("option", "disabled", false);       
        });
   }          
});

这篇关于禁用后启用一个可放置对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！