Question

我有大型可拖动物品需要放入较小的容器中。当容器和物品的尺寸相似时，这很好，但是当它是一个大的可拖动元素时不好。

拖动后，我希望可拖动的内容更改为“所选项目”。

你能帮忙吗？

Try it out yourself here并注意您的可放置区域有多少，具体取决于您点击拖动的可拖动项目的位置。

enter image description here

这是我的JS：

$('.items > li').draggable({
    revert: "invalid",
    helper: function(event) {
        var helperList = $('<ul class="draggable-helper">');
        if ($(this).is('.active')){
            helperList.append($(this).siblings('.active').andSelf().clone());
        } else {
            helperList.append($(this).clone());
        }
        return helperList;
    }
});

$('.drop-containers li').droppable({
    drop: function(event, ui) {
        console.log('dropped');
        var $this = $(this);
        var selectedObjects = new Array();
        if (ui.draggable.hasClass('active')) {
            console.log('active');
            // get all active items
            $('ul.items > li.active').each(function() {
                console.log($(this).attr('id'));
                selectedObjects.push($(this).attr('id'));
                $(this).remove();
            });
        } else {
            console.log('not active');
            selectedObjects.push(ui.draggable.attr('id'));
            ui.draggable.remove();
        }
        $this.append(', ' + selectedObjects.join(', '));
    }
});

Answer 1

我通过更改可放置项目的容差来解决此问题。

$('.drop-containers li').droppable({
  tolerance : 'pointer'
});

更改容差是一个很好的解决方案，因此您不必更改拖动对象的外观，也不必更改可放置对象的外观。如果您想更轻松地删除可拖动项目，请将容差更改为“指针”或“触摸”

Tolerance指定用于测试拖动器是否悬停在droppable上的模式。可能的值：


“fit”：Draggable完全覆盖了droppable。

“intersect”:(默认）Draggable在两个方向上至少重叠50％的droppable。

“pointer”：鼠标指针与droppable重叠。

“touch”：可拖动任意数量的可拖放重叠。

http://api.jqueryui.com/droppable/#option-tolerance

Answer 2

我不完全确定，但我认为这就是你的追求。请检查一下：http://jsfiddle.net/XuZvA/1/

我正在使用drag event来修改helper对象。

如何更改大型可拖动项目的内容以便更容易丢弃？

2 个答案: