如何更改大型可拖动项目的内容，以便更容易放置？答案

【问题标题】：How can I change the content of a large draggable item so that it's easier to drop?如何更改大型可拖动项目的内容，以便更容易放置？
【发布时间】：2013-04-30 22:14:55
【问题描述】：

这是一个小提琴：http://jsfiddle.net/adMXj/

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

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

你能帮忙吗？

这是我的 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(', '));
    }
});

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

Tolerance 指定用于测试可拖动对象是否悬停在可放置对象上的模式。可能的值：

“fit”：Draggable 与 droppable 完全重叠。

“intersect”：（默认） Draggable 在两个方向上至少与 droppable 重叠 50%。

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

“touch”：Draggable 与 droppable 任意重叠。

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

【讨论】：