Comment empêcher les éléments enfants déplaçables de se glisser l’un sur l’autre en position absolue? Quelque chose comme:
if( ($("#firstChild").position().left) >= ($("#secondChild").position().left) ) { $(this).draggable({ disabled: true }); }
mais cela ne désactive dragabble que lorsque vous arrêtez de glisser, le but est d’empêcher de surcharger d’une manière ou d’une autre … ou avec Droppable ???
Des idées pour CAS 2?
MODIFIER:
De plus, ceci est maximum pour l’ enfant1 envers l’ enfant2 , donc il n’y a pas de chevauchement , mais l’ enfant1 peut pousser l’ enfant2 à droite et l’ enfant2 peut pousser l’ enfant1 à gauche, il est important de ne pas se chevaucher!
Quelques notes avant / pour atteindre la solution optimale:
allBetween
allBetween, mais vous ne l’utilisez pas. Je suggère de l’enlever. #buttonOne
événements #buttonOne
, vous utilisez des valeurs incohérentes: 429 et 424: if($("#firstInput").val() > 429 )$("#firstInput").val(424);
#firstInput
(et #thirdInput
) plusieurs fois sans mettre en cache une référence. Les optimisations ont été expliquées précédemment. Je ne les détaillerai pas, car ce n’est pas le sujet de la question. J’ai expliqué la logique de fonction du comportement demandé dans les commentaires de scripts (ci-dessous).
$(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($("") .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 == "ssortingng" && +x1 != x1 || x1 instanceof Element) { x1 = $(x1); } if (typeof x2 == "ssortingng" && +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
vous pouvez utiliser le plugin gamequery. theres une détection de collision.
La deuxième chose que vous pouvez faire est la suivante: lorsque vous survolez votre élément en faisant glisser … donc il ne pourra jamais le faire glisser à l’intérieur. faites quelque chose comme glisser la position de la souris à la droite de l’élément traîné afin que vous soyez sûr que ce n’est pas possible de le faire glisser à l’intérieur de cet élément.
j’espère que tu sais ce que je veux dire
exemple appelant drop:
$('#rightbox').live('mouseenter', function(){ $('#leftbox').droppable.option('drop'); });
quelque chose comme ça … ne pas le tester mais c’est une façon de commencer