这是可能的:创建一个可拖动元素,以便当它拖过特定的可放置元素时,可拖动元素的包含选项被设置为可放置元素吗?这会产生一种效果,即在可放置元素上拖动某些东西会导致可拖动元素被锁定/卡在可放置元素的范围内。
以下是我的代码摘录,但未能达到上述效果。
var droppable_position = $('#droppable').position();
$('#draggable').draggable({
helper: 'clone',
drag: function (event, ui) {
if (ui.position.left > droppable_position.left && ui.position.top > droppable_position.top)
{
$('#draggable').draggable('option', 'containment', '#droppable');
}
}
});
答案 0 :(得分:2)
您可以覆盖被拖动元素的位置。
这里的代码不是“准备好了”,而是允许自己发展的代码。我们的想法是在您的droppable元素的hover
事件中设置包含位置变量,并使用拖动元素的drag
事件中的当前拖动位置对其进行测试。
这个小提琴是位置覆盖的一个例子:http://jsfiddle.net/QvRjL/74/
这个小提琴是一个示例,说明如何检查拖动的元素是否靠近容器的边框:http://jsfiddle.net/pPn3v/22/
位置覆盖示例:
$(document).mousemove(function(e){
window.mouseXPos = e.pageX;
window.mouseYPos = e.pageY;
});
$('[id^="drag-"]').each(function() {
$(this).draggable({
opacity: 0.7,
cursorAt: { top: 15, left: 50 },
scroll: true,
stop: function(){},
drag : function(e,ui){
//Force the helper position
ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left;
ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top;
});
});