JQuery увеличивает порог срабатывания заслонки и перезагружает его положение, если не может произойти защелка

У меня есть два divs, которые можно перетаскивать с помощью двух щелчков.JQuery увеличивает порог срабатывания заслонки и перезагружает его положение, если не может произойти защелка

Я не могу найти или найти способ сделать следующее:

сделать оба перетаскиваемых дивы и оба Droppable дивы ведут себя так же без массированной кода копии вставки.
Увеличьте порог привязки до точки, в которой перетаскиваемый div автоматически перемещается на место.
Если перетаскиваемым ДИВ помещается в маленький внутри сбрасываемой DIV он должен быть сброшен в это последний щелкнул местоположение. \

Я только начинающий так пожалуйста, сообщите мне любые обиды в моем пост, чтобы я мог редактировать его и учиться у них.

<html> 
 
    <head> 
 
     <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
 
     rel = "stylesheet"> 
 
     <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> 
 
     <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 
     
 
     <style> 
 
\t \t #destination { 
 
\t \t \t width: 150px; 
 
\t \t \t height: 150px; 
 
\t \t \t background-color: red; 
 
\t \t } \t 
 
\t \t 
 
\t \t #draggable { width: 150px; height: 150px; background:#eee;} 
 
\t \t 
 
\t </style> 
 
     
 
     <script> 
 
     $(function() { 
 
      $("#draggable").draggable({ snap: "#destination" }); 
 
\t \t \t $("#destination").droppable(); 
 
     }); 
 
     </script> 
 
    </head> 
 
    
 
    <body> 
 
    \t <div id="destination"> 
 
     \t destination 
 
     </div>  
 

 
     
 
     <div id = "draggable"> 
 
     <p>Drag me !!!</p> 
 
     </div> 
 
     
 
     <div id="destination"> 
 
     \t destination 
 
     </div>  
 
     
 
     <div id = "draggable"> 
 
     <p>Drag me !!!</p> 
 
     </div> 
 
     
 
    </body> 
 
</html>

источник

2017-01-22 Adi

Вы можете сделать так.

Установить одинаковый атрибут для перетаскиваемой цели и отбрасываемой цели отдельно, чтобы избежать копирования и вставки.

Использовать snapMode: 'inner' сделать перетаскиваемый div перемещается на место автоматически. И snapTolerance может изменить порог.

И, наконец, revert:'invalid' означает, что перетаскиваемый div вернется в последнюю позицию, если будет помещен в маленький отсек div.

Если вы хотите перетащить draggable1 в droppable1, вы можете добавить еще один атрибут и принять параметр принятия к droppable() функции init.

<html> 
 
    <head> 
 
     <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
 
     rel = "stylesheet"> 
 
     <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> 
 
     <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 
     
 
     <style> 
 
\t \t [data-action='droppable'] { 
 
\t \t \t width: 150px; 
 
\t \t \t height: 150px; 
 
\t \t \t background-color: red; 
 
\t \t } \t 
 
\t \t 
 
\t \t [data-action='draggable'] { width: 150px; height: 150px; background:#eee;} 
 
\t \t 
 
\t </style> 
 
     
 
     <script> 
 
     $(function() { 
 
      $("[data-action='draggable']").draggable({ 
 
       snap: "[data-action='droppable']", 
 
       snapMode: 'inner', 
 
       snapTolerance: 50, 
 
       revert: 'invalid' 
 
      }); 
 
      $("[data-action='droppable']").droppable({ 
 
       accept: function(dragTarget) { 
 
       return $(this).attr('data-pair') === $(dragTarget).attr('data-pair'); 
 
       } 
 
      }); 
 
     }); 
 
     </script> 
 
    </head> 
 
    
 
    <body> 
 
     <div id= "destination1" data-action='droppable' data-pair='1'> 
 
     \t destination1 
 
     </div>  
 

 
     
 
     <div id = "draggable1" data-action='draggable' data-pair='1'> 
 
     <p>Drag me1 !!!</p> 
 
     </div> 
 
     
 
     <div id= "destination2" data-action='droppable' data-pair='2'> 
 
     \t destination2 
 
     </div>  
 
     
 
     <div id = "draggable2" data-action='draggable' data-pair='2'> 
 
     <p>Drag me2 !!!</p> 
 
     </div> 
 
     
 
    </body> 
 
</html>

источник

2017-01-22 12:23:50

вау tahnks много! что мне нужно! – Adi

Можете ли вы объяснить мне, что означает data-action = '', и почему вы его использовали? Я пытаюсь найти его в документации javascript, но с небольшой удачей – Adi

Я думаю, что я получил его, вместо того, чтобы выбирать каждый отдельный div, вы просто добавляете к нему тег, а затем заставляете программу работать только с элементами, имеющими этот тег? – Adi

JQuery увеличивает порог срабатывания заслонки и перезагружает его положение, если не может произойти защелка

ответ

Смежные вопросы