2 개의 jQuery 드래그 가능 목록 항목이 올바르게 작동하지 않습니다 (jsFiddle 예제 사용)

아래의 미니멀리스트 작업 예제는 'one'상자를 드래그하여 '2'상자에 놓으면 두 상자를 서로 바꿉니다. 문제는 상자 '하나'가 떨어지면 그 스타일의 '상단'이 & '왼쪽'값으로 떨어지게됩니다. 클래스에는 'ui-draggable-dragging'이 포함됩니다. 상단에있는 & 왼쪽 값은 요소가 놓기 전에 드래그 된 양과 관련이 있습니다. 그리고 끌기는 '중단되었으므로'잔여 '유감스럽게 드래그 할 수있는'수업 이었습니까?2 개의 jQuery 드래그 가능 목록 항목이 올바르게 작동하지 않습니다 (jsFiddle 예제 사용)

스왑을 원활하게 작동시키기 위해 누락 된 사항은 무엇입니까?

<html> 
<head> 

    <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script> 

    <script type="text/javascript" src="includes/jquery-ui-1.8.2.custom.min.js"></script> 

    <script type="text/javascript"> 

     jQuery.fn.swapWith = function(to) { 
      return this.each(function() { 
       var copy_to = $(to).clone(true); 
       var copy_from = $(this).clone(true); 
       $(to).replaceWith(copy_from); 
       $(this).replaceWith(copy_to); 
      }); 
     }; 

     $(document).ready(function() { 

     options = {revert: true}; 

     $("li").draggable(options) 
     $('#wrapper').droppable({ 
      drop: function(event, ui) { 
      $(ui.draggable).swapWith($('#two')); 
      } 
     }); 
     }); 
    </script> 

</head> 
<body> 
    <form> 
    <ul id="wrapper"> 
     <li id='one'> 
      <div style="width: 100px; height: 100px; border: 1px solid green"> 
       one<br /></div> 
     </li> 
     <li id='two'> 
      <div style="width: 110px; height: 110px; border: 1px solid red"> 
       two<br /></div> 
     </li> 
    </ul> 
    <br /> 
    </form> 
</body> 
</html>

출처

2011-01-03 Tony_Henrich

이 full jsfiddle example here 내 해결입니다.

내 생각 엔 jQuery의 내부 드롭 및 드래그 소재가 작동하는 방식을 보거나 이해하지 않으면 드래그의 모든 내용이 처리되기 전에 약간의 경과 시간이 있다는 것입니다.

그래서 모든 것이 완료 될 때까지 스왑을 시작해서는 안된다고 생각했습니다. 이 일이 언제 일어날 지 모르기 때문에, 약간의 지연 후에 스왑이 발생했습니다. 나는 drop 이벤트에서 setTimeout을 사용했다. 나는 모든 것이 분명하고 안전하다는 것을 확인하기 위해 적어도 600ms를 사용해야했다. 600ms보다 작 으면 '상단'& 'left'는 여전히 프로세스가 완료되지 않았 음을 의미하는 값을 가지고 있습니다. 지연이 길수록 그 값은 작아집니다. 어떤 것이 더 커질 때까지 똑같은 0이 남을 때까지. 시행 착오에 의해 600ms가 그것을하는 것으로 보인다.

누구나 '깨끗한'해결책을 가지고 있다면 고맙게 생각합니다. '과학적'설명이 도움이됩니다. 다른 게시물에서 계속에서

출처

2011-01-03 22:30:21

, 나는 도우미 추가 : '클론'옵션을 다음 예제를 작업 .ui-드래그 - 드래그 클래스

<script type="text/javascript"> 

    jQuery.fn.swapWith = function(to) { 
     return this.each(function() { 
      var copy_to = $(to).clone(); 
      var copy_from = $(this).clone(); 
      $(to).replaceWith(copy_from); 
      $(this).replaceWith(copy_to); 
     }); 
    }; 



    $(document).ready(function() { 

     options = { 
       revert: true, 
       helper: 'clone' 
     }; 

     $("li").draggable(options); 
     $('#wrapper').droppable({ 
      drop: function(event, ui) { 
    //  window.setTimeout(function(){ 
       $('#one').swapWith($('#two')); 
       $(".ui-draggable-dragging").remove(); 
       $("li").draggable(options); 
    //}, 1); 
      } 
     }); 
    }); 

</script>

있는 모든 요소를 제거하기 위해 스크립트를 말했다 : http://jsfiddle.net/XkUDv/26/

희망 하시겠습니까?

추신 : 전에 jsfiddle을 사용하지 않았습니다. 내게 그 부분을 보여 주셔서 감사합니다.

출처

2011-01-04 01:20:45 ehudokai

2 개의 jQuery 드래그 가능 목록 항목이 올바르게 작동하지 않습니다 (jsFiddle 예제 사용)

답변

관련 문제