jquery可拖动:在满足某些条件时拖动控件(暂停)
jquery可拖动:在满足某些条件时拖动控件(暂停)
提问于 2012-10-22 17:52:53
当拖动一个元素时，我正在做一些计算，当某个标准匹配时，我希望拖拽到，暂停。
我不想绊倒鼠标事件，只是暂停一下。
我在这个JS小提琴上有一个完美的例子
请查看一个容器和一个矩形列表。我想要达到的是与遏制相反的.
如果我将容器设置为.draggable_wrapper，我的UL列表就会被限制在里面.我不想那样
我想要的是，当我拖动列表时，如果列表位置大于0 (>0)，则暂停向右拖动，只允许拖动到左侧(因此拖到负值位置).
我不想第一次李的左边框到集装箱左边边框的右边.
在另一边同样的事情..。当向左拖曳时..。当8. li的右边界越过容器的右边界时，我想停止(这发生在位置<-55 to的例子中；
所以为了让它更易读
$(....).draggable({
....
drag: function(){
var p_left = $(this).position().left;
if(left > 0) stop_dragging_right, allow only left;
if(left < -55px) sto_dragging_left, allow_only_right;
});我怎么能这么做？约束时也会做类似的操作。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-10-22 18:08:12
您可以使用抵消()获取包装器元素的坐标，并通过在安全壳选项中传递一个数组来提供自己的容器框：
var wrapperOffset = $(".draggable_wrapper").offset();
$('.draggable_wrapper ul').draggable({
distance: 3,
axis: "x",
revert: false,
scroll: false,
containment: [
wrapperOffset.left - 55,
wrapperOffset.top,
wrapperOffset.left,
wrapperOffset.top
],
drag: function(e) {
$('#posx').val($(this).position().left);
}
});你会发现一个更新的小提琴这里。
Stack Overflow用户
发布于 2012-10-22 18:00:33
如果条件为false，则可以重写正在拖动的元素的位置，并应用相同的位置。
这个小提琴是一个位置压倒：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
if(myCondition)
{
//The draggable element can be moved
ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left;
ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top;
}
else
return false; //No move allowed
});
});Stack Overflow用户
发布于 2012-10-22 18:05:21
通过定义可拖区域的边界，可以限制/约束可拖元件的移动。查看jquery 这里的例子
您是否有可能有一个外部父/容器来限制拖动？你可以做下面这样的事情。
$( "#draggable5" ).draggable({ containment: "parent" });如果父母双方都进行了扩展，则满足您的计算限制。
希望这有帮助..。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13016938
复制相关文章
相似问题
腾讯云开发者
