拖放-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只關心第一個（嘗試改變順序，你會看到他們對齊列表中的第一個）。如果你想這樣做，那麼你需要對它們進行迭代，以獲得正確的值。