다른 요소에 요소를 프로그래밍 방식으로 드래그 앤 드롭

Question

jQuery UI를 사용하면 javacript를 사용하여 드래그 작업 &을 실행할 수 있습니까?

Example. 링크를 클릭하면 #pony을 드래그하여 #box에 놓습니다. 나는 끌기 이벤트를 트리거 시도했지만 그 일 : 당신은 당신이 실제로 마우스로 객체를 드롭 할 때 발생하는 동일한 기능을 발사 할 경우

$('#pony').trigger('drag', [$('#box')]); 

Answer 1

jQuery UI 팀이 프로그래밍 방식으로 drop 이벤트를 트리거하는 방법입니다.

droppable_events.js는 :

draggable = $("#draggable1").draggable(), 
droppable1 = $("#droppable1").droppable(config), 
droppable2 = $("#droppable2").droppable(config), 

droppableOffset = droppable1.offset(), 
draggableOffset = draggable.offset(), 
dx = droppableOffset.left - draggableOffset.left, 
dy = droppableOffset.top - draggableOffset.top; 

draggable.simulate("drag", { 
    dx: dx, 
    dy: dy 
}); 

simulatejquery.simulate.js 함수로 정의된다. 간단히 말하면, drappable을 droppable로 이동하여 drop 이벤트를 발생시킵니다.

이 모두를 넣으면 다음 스 니펫이 있습니다. 건배.

$(function() { 
 
    $("#draggable").draggable(); 
 
    $("#droppable").droppable({ 
 
    drop: function(event, ui) { 
 
     console.log(event, ui); 
 
     alert('dropped!'); 
 
    } 
 
    }); 
 
}); 
 

 
function trigger_drop() { 
 
    var draggable = $("#draggable").draggable(), 
 
    droppable = $("#droppable").droppable(), 
 

 
    droppableOffset = droppable.offset(), 
 
    draggableOffset = draggable.offset(), 
 
    dx = droppableOffset.left - draggableOffset.left, 
 
    dy = droppableOffset.top - draggableOffset.top; 
 

 
    draggable.simulate("drag", { 
 
    dx: dx, 
 
    dy: dy 
 
    }); 
 
}

#draggable { 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 0.5em; 
 
    float: left; 
 
    margin: 10px 10px 10px 0; 
 
} 
 
#droppable { 
 
    width: 150px; 
 
    height: 150px; 
 
    padding: 0.5em; 
 
    float: left; 
 
    margin: 10px; 
 
} 
 
br { 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
 

 
<script src="https://rawgit.com/jquery/jquery-ui/1-11-stable/external/jquery-simulate/jquery.simulate.js"></script> 
 

 

 
<div id="draggable" class="ui-widget-content"> 
 
    <p>Drag me to my target</p> 
 
</div> 
 

 
<div id="droppable" class="ui-widget-header"> 
 
    <p>Drop here</p> 
 
</div> 
 
<br> 
 
<button onclick="trigger_drop()">trigger drop event</button>

Answer 2

• , 당신은 캡슐화 할 수 있습니다하지 않는 것 드롭 스크립트를 다른 곳에서도 간단히 호출 할 수있는 기능으로 변환 할 수 있습니다.

• 항목의 애니메이션 동작을 끌 때 &을 떨어 뜨린 경우 위의 단계를 따라 대상 위치에 .stop().animate({})을 입력해야합니다.

• 방금 ​​대상에 추가하려는 경우 그냥 .appendTo($('#yourtargetid'));입니다. 내가 다른 곳 행한 것 같이 난 아무것도 missunderstood 경우, 내 명성이 아닌가요 점 죄송합니다

충분히 다만 사전에 요청할 수 있습니다.