드래그 가능한 항목에 대한 Jquery 애니메이션 문제

드래그 가능한 항목 위치를 바꾸기위한 jquery 스크립트가 있는데 어떤 이유로 인해 애니메이션 효과로 인해 스왑 중에 시각적 문제가 발생합니다. 이 스크립트는 codef0rmer의 jsfiddle 변형입니다. 필자의 요구에 맞게 약간 변경했습니다. 문제를 표시하는 jsfiddle을 만들었습니다. 현재 스왑 함수에서 발생하는 문제를 찾아 냈지만 작동하는 행은 주석으로 처리했지만 움직이지는 않았습니다. 누군가가 스왑을 올바르게 움직이게하는 데 도움이된다면 크게 감사하겠습니다. http://jsfiddle.net/AywmJ/161/드래그 가능한 항목에 대한 Jquery 애니메이션 문제

이 문제가에서 발생되는 기능입니다 (저는 믿습니다) : 당신은 여기에 jsfiddle 볼 수 있습니다

function swap($el, fromPos, toPos, duration, callback) { 
      $el.animate({fromPos, toPos}, duration, callback || $.noop); 
      //(callback || $.noop)(); 
     }

출처

2016-05-31 Tyharo

jsfiddle 링크와 함께 jquery를 업데이트했지만 여전히 동일한 문제가 발생합니다. – Tyharo

"스왑 중에 시각적 인 문제"_ 스왑의 원인이되는 시각적 인 문제를 정확히 설명 할 수 있습니까? –

요소의 위치를 서로 바꿀 때 드래그 된 핀이 잘못된 방향에서 움직여 스왑 중에 자리를 잡습니다. jsfiddle을 들여다보고 핀을 다른 핀으로 드래그하려고하면 스왑 중에 문제를 볼 수 있습니다. – Tyharo

나는 JQuery와 애니메이션에 익숙하지 않은 걸,하지만 난을 해결하기 위해 몇 가지 발견 스왑 문제.

당신은 ("드래그 클래스와 div 태그")의 추가 syle의 건물 자리는 왼쪽 상단 속성을 현재 위치에서 이동 얼마나 의미 left: 151px; top: 22px와 style="position: relative; z-index: auto; left: 151px; top: 22px;", 자리를 드래그합니다. 당신이 swapping .draggable placeholders있는 현재의 코드에서

, 그건 당신이 .draggable

<div class="pinChildContainer droppable"> 
     <div class="pins draggable"> 
      <img class="pinImage" src="img/paymentServices.jpg" alt="Payment Services" width="188" height="185" /> 
      <p class="pinTitle">Payment Services</p> 
     </div> 
</div>

변경의 내용을 교환 비정상적인 동작 대신

을보고있는 이유 (지금 .pins을 교환)

<div class="pinChildContainer droppable"> 
     <div class="draggable"> 
      <div class="pins"> 
        <img class="pinImage" src="img/paymentServices.jpg" alt="Payment Services" width="188" height="185" /> 
        <p class="pinTitle">Payment Services</p> 
      </div> 
     </div> 
</div>

다음은 .pins를 바꾸는 코드입니다.

,563,210

JSFiddle

나는 그것이 광택 코드가 아닙니다 같아요,하지만 당신이 찾고있는 효과를 제공합니다.

출처

2016-06-09 19:47:55

대단히 감사합니다. Pavan, 크게 감사드립니다! – Tyharo

드래그 가능한 항목에 대한 Jquery 애니메이션 문제

답변

관련 문제