드래그 가능한 및 낙하 할 기능

Question

의 나는 내 왼쪽 제목 영역 1에 약간의 낙하 할 DIV 년대 있다고 가정 해 봅시다 - 4

<div id="zone1"></div> 
<div id="zone2"></div> 
<div id="zone3"></div> 
<div id="zone4"></div> 

을 그리고 내 오른쪽 측면에서 드래그 항목

<div id="drag1">Apple</div> 
<div id="drag2">Banana</div> 
<div id="drag3">Kiwi</div> 
<div id="drag4">Orange</div> 

내가 아는 다음과 같이 드래그하고 놓을 수있게 설정할 수 있습니다.

for (var i=1;i<=4;i++) 
{ 
    var x = "zone" + i; 
    $(x).droppable(); 
} 
    for (var i=1;i<=4;i++) 
{ 
    var x = "drag" + i; 
    $(x).draggable(); 
} 

이제 함수를 트리거하는 방법에 대해 설명하겠습니까? 과일이 떨어 뜨린 곳 (zone1, zone2 등)과 그곳에 떨어진 과일을 나에게 줄 영역에서 과일이 떨어졌을 때 시작하십시오. 이상적으로, 나는 과일의 이름을 원하지 않을 것이다. 아마도 과일과 관련된 ID가 숨겨진 입력 태그 나 뭔가에 숨어 있기를 원할 것이다.

Answer 1

예

$(init) 

function init() { 
    $('#makeMeDraggable').draggable(); 
    $('#makeMeDroppable').droppable({ 
    drop: handleDropEvent 
    }); 
} 

function handleDropEvent(event, ui) { 
    var draggable = ui.draggable; 
    alert('The square with ID "' + draggable.attr('id') + '" was dropped onto me!'); 
} 

Answer 2

this tutorial에서 당신은 droppable 상호 작용의 drop 이벤트를 사용할 수 있습니다. 이 이벤트 핸들러에서 $(this)은 드롭 가능한 요소를 가리키며, 여기서 ui.draggable은 드래그 가능한 요소를 가리 킵니다.

for (var i=1;i<=4;i++) 
{ 
    var x = "zone" + i; 
    $(x).droppable({ 
     drop: function(){ 
      //This will alert the id of container in which fruit is dropped 
      alert($(this).attr('id')); 

      //This will alert the id of fruit container which is dragged 
      alert($(ui.draggable).attr('id')); 
     } 
    }); 
} 
    for (var i=1;i<=4;i++) 
{ 
    var x = "drag" + i; 
    $(x).draggable(); 
} 

Answer 3

나는 당신이 가지고있는 것 대신에 이것을하는 것이 좋습니다. 스크립트에 대한

다음

<div id="zone1" class="droppable"></div> 
<div id="zone2" class="droppable"></div> 
<div id="zone3" class="droppable"></div> 
<div id="zone4" class="droppable"></div> 

<div id="drag1" class="draggable">Apple</div> 
<div id="drag2" class="draggable">Banana</div> 
<div id="drag3" class="draggable">Kiwi</div> 
<div id="drag4" class="draggable">Orange</div> 

: 도움이

var fruit_id = ''; 
var dropbox_id = ''; 
$('.draggable').draggable(); 
$('.droppable').droppable({ 
       drop: function(event, ui) { 
      fruit_id = $(ui.draggable).attr('id'); 
          dropbox_id = $(this).attr('id'); 
          /* DO SOMETHING HERE */ 
     } 
}); 
/* Or do something here! */ 

희망!

Answer 4

<style> 
.zones>div{ border:solid 1px gray; background-color:yellow; padding:20px;margin:5px;} 
</style> 

<div class="zones"> 
    <div id="zone1"></div> 
    <div id="zone2"></div> 
    <div id="zone3"></div> 
    <div id="zone4"></div> 
</div> 


<div id="drag1" fruitid="1">Apple</div> 
<div id="drag2" fruitid="2">Banana</div> 
<div id="drag3" fruitid="3">Kiwi</div> 
<div id="drag4" fruitid="4">Orange</div> 

<script> 

$("div[id*='zone']").droppable({ 
      accept: "div[id*='drag']", 
      drop: function(event, ui) { 
       alert(ui.draggable.text() + " with fruitid = "+ ui.draggable.attr("fruitid")+" added to " + $(this).attr("id")); 
        $("<div/>").text(ui.draggable.text()).appendTo(this); 
      } 
     }) 
$('div[id*="drag"]').draggable({helper: "clone"}); 

</script>