如何防止可拖动的子元素在绝对位置上相互拖拽? 类似的东西:
if( ($("#firstChild").position().left) >= ($("#secondChild").position().left) )
{
$(this).draggable({ disabled: true });
}
但这只会在停止拖动时禁用拖拽,目标是以某种方式防止过度划分 ......或者使用Droppable ???
CASE 2的任何想法?
编辑:
此外, child1 对 child2 的最大值,因此不会发生重叠,但 child1 可以推送右边是 child2 , child2 可以在左边推送 child1 ,重要的是没有重叠的ocurrs!
答案 0 :(得分:2)
你可以使用gamequery插件。这是碰撞检测。
你可以做的第二件事是:当你在拖动时悬停你的元素......只是触发掉落?所以他永远无法把它拖进去。在拖动的元素的右侧做一些鼠标拖动位置,这样你就可以确定无法将它拖到这个元素中。
我希望你知道我的意思
示例调用drop:
$('#rightbox').live('mouseenter', function(){
$('#leftbox').droppable.option('drop');
});
类似的东西......没有测试它,但它是一种以
开头的方式答案 1 :(得分:1)
之前/为了达到最佳解决方案的一些注意事项:
allBetween
变量,但未使用它。我建议删除它。#buttonOne
事件监听器中,您使用的是不一致的值:429和424:if($("#firstInput").val() > 429 )$("#firstInput").val(424);
#firstInput
(和#thirdInput
)选择器而不缓存引用。之前已经解释过优化。我不会详细说明,因为那不是问题的主题。我在脚本注释(下面)中解释了所请求行为的函数逻辑。
$(document).ready(function() {
// Helper to easily bind related events to the button.
function createButtonClickEvent(sel_selector, input_selector, left_limit, right_limit) {
return function(){
var $sel = $(sel_selector),
$input = $(input_selector),
val = $input.val();
if (val > right_limit) input.val(val = right_limit);
else if (val < left_limit) input.val(val = left_limit);
$sel.css('left', val + "px");
var $allElems = $("#second").children(".single"),
$between = $allElems.inRangeX("#selFirst", "#selSecond");
$allElems.removeClass("ui-selected");
$between.addClass("ui-selected");
}
}
//setValue 1
$("#buttonOne").click(createButtonClickEvent("#selFirst", "#firstInput", 0, 429));
//setValue2
$("#buttonTwo").click(createButtonClickEvent("#selSecond", "#thirdInput", 0, 429));
//graph values
var valuesG = [],
$elements = $();
for (i = 0; i < 144; i++) {
valuesG[i] = Math.floor(Math.random() * (30 - 20 + 1) + 10);
$elements = $elements.add($("<div class='single'>")
.css('height', valuesG[i])
.css('margin-top', 30 - valuesG[i]));
}
$elements.appendTo($("#second"));
$("#second").children(".single").addClass("ui-selected");
//inRangeX (http://stackoverflow.com/a/8457155/938089)
(function($) {
$.fn.inRangeX = function(x1, x2) {
if (typeof x1 == "string" && +x1 != x1 || x1 instanceof Element) {
x1 = $(x1);
}
if (typeof x2 == "string" && +x1 != x1 || x1 instanceof Element) {
x2 = $(x2);
}
if (x1 instanceof $) {
x1 = x1.offset().left;
}
if (x2 instanceof $) {
x2 = x2.offset().left;
}
x1 = +x1;
x2 = +x2;
if (x1 > x2) {
var x = x1;
x1 = x2;
x2 = x;
}
return this.filter(function() {
var $this = $(this),
offset = $this.offset(),
rightSide = offset.left - 5;
return offset.left >= x1 + 5 && rightSide <= x2;
});
}
})(jQuery);
//firstPositions
var startFirst = $(".selector#selFirst").position().left;
var startSecond = $(".selector#selSecond").position().left;
$('input#firstInput').val(startFirst);
$('input#thirdInput').val(startSecond);
// *********** Actual requested code *********** //
//first and second-Picker
var $selFirst = $("#selFirst"),
$selSecond = $("#selSecond"),
cachedWidth = $selFirst.outerWidth();
function drag_function(event, ui){
var $firstRightBorder = $selFirst.position().left + cachedWidth,
$secondLeft = $selSecond.position().left,
diff = $firstRightBorder - $secondLeft;
/*
* The logic is as follows:
* dif < 0 if selFirst and selSecond do not overlap
* dif = 0 if they're next to each other
* dif > 0 if they overlap each other
* To fix this (reminder: if they overlap, dif is negative):
* If current == #selFirst,
* left = left + dif
* else (if current == #selSecond),
* left = left - dif
*/
if (diff > 0) {
var currentLeft = parseFloat($(this).css("left"));
if (this.id == "selSecond") diff = -diff;
ui.position.left = currentLeft - diff;
ui.helper.css("left", currentLeft - diff);
}
var $allElems = $("#second").children(".single"),
$between = $allElems.inRangeX("#selFirst", "#selSecond");
$("#firstInput").val($("#selFirst").position().left);
$("#thirdInput").val($("#selSecond").position().left);
$allElems.removeClass("ui-selected");
$between.addClass("ui-selected");
var allBetween = $('.ui-selected');
}
$("#selFirst, #selSecond").draggable({
containment: 'parent',
axis: 'x',
drag: drag_function,
stop: drag_function
});
}); //eof