Comment empêcher les éléments enfants déplaçables de se glisser les uns sur les autres?

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 ???

entrez la description de l'image ici

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:

  • Vous avez déclaré et initialisé la allBetween allBetween, mais vous ne l’utilisez pas. Je suggère de l’enlever.
  • Sur votre #buttonOne événements #buttonOne , vous utilisez des valeurs incohérentes: 429 et 424: if($("#firstInput").val() > 429 )$("#firstInput").val(424);
    1. Vous utilisez le #firstInput (et #thirdInput ) plusieurs fois sans mettre en cache une référence.
    2. Vous dupliquez les fonctions pour chaque bouton. Une solution meilleure et moins sujette aux erreurs consiste à créer une méthode pour construire ces méthodes.

Code final

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