jQuery UI Draggable : 드래그 이벤트에 봉쇄 업데이트

Question

가능 : 특정 droppable 요소 위로 드래그 할 때 드래그 가능한 요소의 포함 옵션이 droppable 요소로 설정되도록 드래그 가능한 요소를 만드시겠습니까? 이렇게하면 droppable 요소 위에 무언가를 끌면 draggable 요소가 droppable 요소의 경계에 잠기거나 달라 붙을 수 있습니다.

다음은 위의 효과를 달성하지 못하더라도 내 코드에서 발췌 한 것입니다.

var droppable_position = $('#droppable').position(); 
$('#draggable').draggable({ 
    helper: 'clone', 
    drag: function (event, ui) { 
     if (ui.position.left > droppable_position.left && ui.position.top > droppable_position.top) 
     { 
      $('#draggable').draggable('option', 'containment', '#droppable'); 
     } 
    } 
}); 

Answer 1

끌고있는 요소의 위치를 ​​덮어 쓸 수 있습니다.

"준비가되어 있습니다"라는 코드는 아니지만 스스로 개발할 수있는 부분입니다. 아이디어는 드롭 가능한 요소의 hover 이벤트에 포함 위치 변수를 설정하고 드래그 요소의 drag 이벤트에서 현재 드래그 위치로 테스트합니다. http://jsfiddle.net/pPn3v/22/

위치가 덮어 쓰기 :이 바이올린은 당신이 끌어 요소가 컨테이너의 국경 근처에 있는지 확인하기 위해 할 수있는 방법의 예입니다 http://jsfiddle.net/QvRjL/74/

:

이 바이올린은 위치 최우선의 예입니다 예 :

$(document).mousemove(function(e){ 
    window.mouseXPos = e.pageX; 
    window.mouseYPos = e.pageY; 
}); 

$('[id^="drag-"]').each(function() { 
    $(this).draggable({ 
     opacity: 0.7, 
     cursorAt: { top: 15, left: 50 },   
     scroll: true, 
     stop: function(){}, 
     drag : function(e,ui){    
      //Force the helper position 
      ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left; 
      ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top; 
     }); 
});