Comment empêcher les éléments enfants entraînables de se glisser les uns sur les autres?
Comment empêcher les éléments enfants entraînables de se glisser les uns sur les autres en position absolue? Quelque chose comme:
if( ($("#firstChild").position().left) >= ($("#secondChild").position().left) ) { $(this).draggable({ disabled: true }); } Mais cela ne désactive que le dragabble lorsque vous arrête de traîner, le but est d'éviter de surcharger de quelque façon … Ou avec Droppable ???
Des idées pour CASE 2?
- Détection de collision en toile HTML5. L'optimisation aussi
- Déplacez les rectangles afin qu'ils ne se chevauchent pas
- Le système de détection de collision Javascript n'ignore pas les collisions bloquées
- Détection de collision jQuery pendant l'animation
- Détection de collision de formes irrégulières
MODIFIER:
En outre, ceci est maximal pour child1 vers child2 , donc aucun chevauchement ne se produit , mais child1 peut pousser child2 à droite et child2 peut pousser child1 à gauche, important, c'est qu'aucun chevauchement ne se produit!
- Traversées de collision
- Détection de collision en toile html5
- Détection d'une collision de rectangle avec cercle
- Testez si deux lignes se croisent – Fonction JavaScript
Quelques notes avant / afin d'atteindre la solution optimale:
- Vous avez déclaré et initialisé la
allBetweenallBetween, mais ne l'utilisez pas. Je suggère de l'enlever. - À votre
#buttonOneécouteur d'événements, vous utilisez des valeurs incohérentes: 429 et 424:if($("#firstInput").val() > 429 )$("#firstInput").val(424);- Vous utilisez le
#firstInput(et#thirdInput) plusieurs fois sans mettre en cache une référence. - Vous doublez les fonctions de chaque bouton. Une meilleure solution, moins susceptible d'erreurs, est de créer une méthode pour construire ces méthodes.
- Vous utilisez le
Code final
Les optimisations ont été expliquées précédemment. Je ne les élaborerai pas, car ce n'est pas le sujet de la question. J'ai expliqué la logique des fonctions du comportement demandé dans les commentaires des 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($("<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
Vous pouvez utiliser le plugin gamequery. Il y a une détection de collision.
La deuxième chose que vous pouvez faire est: lorsque vous déplacez votre élément en faisant glisser … simplement déclenchez-vous? De sorte qu'il ne pourra jamais le traîner à l'intérieur. Faites quelque chose comme la position de traînée de la souris à droite de l'élément entraîné, de sorte que vous êtes sûr qu'il n'est pas possible de le faire glisser dans cet élément.
J'espère que vous savez ce que je veux dire
Exemple d'appel:
$('#rightbox').live('mouseenter', function(){ $('#leftbox').droppable.option('drop'); });
Quelque chose comme ça … ne l'éprouvez pas mais c'est un moyen de commencer