드래그 가능 및 드롭 가능한 동적 위치 지정

Question

jQuery UI를 사용하여 퍼즐을 작성하려고합니다. 나는 퍼즐, #splinter 및 컨테이너 #vase의 일부를 posision을 가지고있다 :

<div id="vase"> 
    <div id="target"></div> 
</div> 
<div class="splinter splinter-1" data-target-x="53" data-target-y="90"> 
    <img src="splinter-1.png" /> 
</div> 

내가 낙하 할의 위치를 ​​설정하는 부분의 데이터 속성을 사용합니다. 이 작동하지만 스냅 영역을 다시 계산하지 않습니다. 부품은 원래 있던 위치로 스냅됩니다.

$('.splinter').draggable({ 
revert: 'invalid', 
snap: '#target', 
snapMode: 'inner', 
start: function (event, ui){ 
    var $target = $('#target'); 
    $('#vase').append($target); 
    $this = $(this); 
    $('#target').droppable('destroy').droppable({ 
     accept: '.splinter' 
    }); 
    $target.css({ 
     width: $this.width(), 
     height: $this.height(), 
     left: parseInt($this.attr('data-target-x')), 
     top: parseInt($this.attr('data-target-y')) 
    }); 
    $this.draggable('option', 'snap', '#target'); 
}, 
stop: function (event, ui){ 
    $this = $(this); 
    $this.draggable('destroy'); 
} 
}); 

편집 : 내가 요소를 드래그 한 후 다시 스냅 DIV에 드래그를 놓습니다 경우 작동하는지 발견

. 물론 나는 그것을 위해 되돌리기 옵션을 비활성화해야합니다. 전에이 행동을 소홀히 한 사람이 있습니까?

감사

루카스

당신은 아마 refreshPositions 사용할 필요가

Answer 1

: 사실을. 성능에 대해서는 끔찍한 것이므로 드롭/이동할 때마다 설정하고 재설정하는 것이 좋습니다.

$('.splinter').draggable({refreshPositions:true,...}); 

또 다른 잡았다, 난 당신이 어떤 점에서 퍼즐 조각을 많이 할 겁니다 같은데요. jQuery 드래그/드롭은 이것을 너무 잘 처리하지 못합니다. 드래그/드롭으로 이벤트 위임을 사용할 수있는 플러그인을 살펴볼 수 있습니다.

당신은 클릭에 위치 (또는 다른 이벤트)를 설정하여이 더 나은 작업을 수행 할 수 있습니다 :

$('.splinter').click(function(){...set css position...}).draggable(...); 

이 위치가 "시작"전에 계산 된 모든 문제를 해결하는 것은 호출되는 타겟 위치를 변경할 위치입니다.

Answer 2

문제는 콜백 함수가 실행 된 순서와 관련이 있습니다. "시작"콜백 함수는 스냅 요소 위치가 계산 된 후에 호출됩니다. 이 콜백에서 #target div의 위치를 ​​변경했습니다.

$('.splinter').mousedown(function(){ 
    var $target = $('#target'); 
    //$('#vase').append($target); 
    $this = $(this); 
    $target.css({ 
     width: $this.width(), 
     height: $this.height(), 
     marginLeft: parseInt($this.attr('data-target-x')), 
     marginTop: parseInt($this.attr('data-target-y')) 
    }); 
}); 

대신 내가 클릭 이벤트 드래그 사용하기 전에 트리거되고있는 mousedown 이벤트에 대한 바인딩 콜백 기능 : 이것은 내가이 문제를 해결하는 방법입니다.