드래그 앤 드롭 -JQuery

Question

내 개인적인 용도로 드래그 기능을 직접 만들면 요소를 드래그 할 수 있습니다. 나는 문제가있다. 드래그를 하나 만들려고 할 때 엘리먼트를 드래그 할 수 있지만 드래그하면 원래 위치로 되돌아갑니다. here처럼이 기능이 작동하지 않습니다. #drag2 또는 #drag3을 놓으면 #drag1의 위치로 이동합니다.

내 기능 :

function drag(el) { 
    var position = $(el).position(); 
    var ptop = position.top; 
    var pleft = position.left; 
    var down = false; 
    $(el).mousedown(function(event) { 
     down = true; 
     $(this).css({ 
      cursor: 'crosshair', 
     }); 
     $(this).mousemove(function(event) { 
      if (down == true) { 
       $(this).css({ 
        cursor: 'crosshair', 
       }); 
       var w = $(this).width(); 
       var h = $(this).height(); 
       var left3 = (w/2) + 7; 
       var top3 = (h/2) + 7; 
       $(this).css({ 
        cursor: 'crosshair', 
        left: (event.clientX) + (3 * 3) - left3, 
        top: (event.clientY) + (3 * 3) - top3 
       }); 
      } 
     }).mouseup(function() { 
      down = false; 
      $(this).css({ 
       cursor: 'default', 
      }); 
      $(this).animate({ 
       top: ptop, 
       left: pleft 
      }, 300); 
     }); 
    }); 
} 

내가 이전 위치를 얻을 수 있습니다

 var position = $(el).position(); 
     var ptop = position.top; 
     var pleft = position.left; 

은 그래서 그들 모두의 위치를 ​​얻을 그들이 어디에 있었는지에 그들에게 자신을 돌아 오게해서는 안를? 어떤 도움을 주시면 감사하겠습니다.

편집 : 나는 감사, 가되지이 어떤 PLUGIN 또는 JQUERY UI를 사용 하시겠습니까 어쨌든

Answer 1

몇 가지 다른 문제로 실행하는 것 같아요 : 왼쪽 상단에 1 http://jsfiddle.net/BggPn/4/

당신은 1 VAR을 정의합니다. 3 가지 요소 모두 동일한 변수를 사용합니다. 요소를 반복하면 각 요소에 자체 범위가있는 새 범위가 만들어집니다.

근무 코드 :

$.fn.drag = function drag(){ 
    return this.each(function(){ 
     var position = $(this).position(); 
     var ptop = position.top; 
     var pleft = position.left; 
     var down = false; 
     $(this).mousedown(function(event) { 
      down = true; 
      $(this).css({ 
       cursor: 'crosshair', 
      }); 
      $(this).mousemove(function(event) { 
       if (down == true) { 
        $(this).css({ 
         cursor: 'crosshair', 
        }); 
        var w = $(this).width(); 
        var h = $(this).height(); 
        var left3 = (w/2) + 7; 
        var top3 = (h/2) + 7; 
        $(this).css({ 
         cursor: 'crosshair', 
         left: (event.clientX) + (3 * 3) - left3, 
         top: (event.clientY) + (3 * 3) - top3 
        }); 
       } 
      }).mouseup(function() { 
       down = false; 
       $(this).css({ 
        cursor: 'default', 
       }); 
       $(this).animate({ 
        top: ptop, 
        left: pleft 
       }, 300); 
      }); 
     }); 
    }); 
} 

은 이제하여 호출 할 수 있습니다 :

$(document).ready(function() { 
    drag('#drag, #drag2, #drag3') 
}); 

function drag(el) { 
    $(el).each(function(){ 
     var position = $(this).position(); 
     var ptop = position.top; 
     var pleft = position.left; 
     var down = false; 
     $(this).mousedown(function(event) { 
      down = true; 
      $(this).css({ 
       cursor: 'crosshair', 
      }); 
      $(this).mousemove(function(event) { 
       if (down == true) { 
        $(this).css({ 
         cursor: 'crosshair', 
        }); 
        var w = $(this).width(); 
        var h = $(this).height(); 
        var left3 = (w/2) + 7; 
        var top3 = (h/2) + 7; 
        $(this).css({ 
         cursor: 'crosshair', 
         left: (event.clientX) + (3 * 3) - left3, 
         top: (event.clientY) + (3 * 3) - top3 
        }); 
       } 
      }).mouseup(function() { 
       down = false; 
       $(this).css({ 
        cursor: 'default', 
       }); 
       $(this).animate({ 
        top: ptop, 
        left: pleft 
       }, 300); 
      }); 
     }); 
    }); 
} 

이 그것을 플러그인 확인 당신이 보내는 때마다

$("#drag1, #drag2").drag(); 

Answer 2

드래그 후 사업부의 현재 위치를 얻을이

.mouseup(function() { 
      var position = $(this).position(); 
      down = false; 
      $(this).css({ 
       cursor: 'default', 
      }); 
      $(this).animate({ 
       top: position.top, 
       left: position.left 
      }, 300); 

DEMO

를 통해 설정

---

왜 드래그 앤 드롭 플러그인을 사용하지 마십시오. 이 문서

http://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html

또는이 하나

http://plugins.jquery.com/project/dragndrop

Answer 3

이 의견을 참조하십시오 1) 왜) jQuery를 UI (드래그 사용하지 않는?

2) 요소 대신 선택기를 제공한다는 아이디어가 잘못되었습니다. 선택기가 여러 요소로 이어질 수 있으며 이것이 실패한 첫 번째 이유입니다.

function drag(selector) { 
    $(selector).each(function() { 
     var el = $(this); 
     //rest of code 
    } 
} 

으로 시작하면 더 좋을 것입니다. 하지만 난 당신이 솔루션은

이 바이올린을 참조하십시오 매우 간단하다 결국

Answer 4

문제는 셀렉터 목록에 '#drag, #drag2. #drag3' 및 귀하의 위치 va riable은 첫 번째 것에 대해서만 신경을 씁니다 (주문을 변경하면 목록의 첫 번째 스냅에 나타납니다). 이 방법을 원한다면 올바른 값을 얻기 위해 반복을 통해 each 반복을 수행해야 할 것입니다.