拖放-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; 

所以它应该不会让所有的人的位置，并把他们的自我恢复，他们在哪里？任何帮助将不胜感激。

编辑：我不要使用的任何插件或jQuery UI的，感谢反正

Answer 1

的解决方案是非常简单的

看到这个小提琴：http://jsfiddle.net/BggPn/4/

定义1个VAR为左，1为最高。所有3个元素使用相同的变量。如果你循环遍历元素，那么你创建一个新的范围，每个元素都有自己的变量。

工作代码：

$(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); 
      }); 
     }); 
    }); 
} 

使它成为一个插件：

$.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); 
      }); 
     }); 
    }); 
} 

现在，你可以通过调用它：

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

Answer 2

得到拖拽后div的当前位置，并通过这个

.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

2想法： 1）你为什么不使用jQuery UI（可拖动）？

2.）给选择器代替元素的想法是错误的，选择器可能会导致多个元素，这是它失败的第一个原因。如果你从

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

它会更好。但我认为你会碰到一些其他问题，最终

Answer 4

的问题是，只要你发送在选择器列表'#drag, #drag2. #drag3'和你的位置VA riable只关心第一个（尝试改变顺序，你会看到他们对齐列表中的第一个）。如果你想这样做，那么你需要对它们进行迭代，以获得正确的值。