讓鼠標在鼠標點擊鼠標後跟着鼠標

我試圖讓一個jquery函數跟隨鼠標與一個div，當它在mousedown上，當它在mouseup它留在最後它的位置。讓鼠標在鼠標點擊鼠標後跟着鼠標

任何消化。

2014-02-14 user3308331

「當它在mousedown上時，當它在mouseup上時，它保持在它的最後位置。」你能澄清你的意思嗎？ –

對不起，當它在mousedown上的div時，當它在鼠標上時，它在最後一個位置上是saty，它是 – user3308331

「當它在mousedown時休眠div」 - 因此，頁面上的div跟隨光標，因爲鼠標移動，當鼠標按鈕關閉？ –

爲什麼不能簡單地通過jQuery的使用拖放：

<script> 
$(function() { 
$("#draggable").draggable(); 
}); 
</script>

Jquery draggable

來源

2014-02-14 00:21:24

actully我擁有的是這個我因爲，我的老師希望我們用這樣的東西做這件事：但我不能完成我的功能，如果你能幫助我，這是一個初學者，這將是好事。

我已經把一個簡單的工作示例定義了Draggable對象。您可以指定拖動項目（您正在四處移動的元素）以及拖動邊界（空間或元素）（您正在移動項目）。如果您想要將可拖動項目限制在頁面上的某個空間（例如容器）上，或者定義數學基礎的相對座標系統，則邊界的概念非常重要。

我的解決方案是不是最快的，但它證明了這一概念：

$(function() { 

    window.mousedown = 0; 
    $(window).on('mousedown mouseup', function(e) { 
     if(e.type == 'mousedown') { this.mousedown++; } 
     else { this.mousedown--; } 
    }); 

    var Draggable = function(dragItem, dragBoundary) { 
     this.item = $(dragItem).css('position', 'absolute'); 
     this.item.on('mousemove', $.proxy(this.handleDragEvent, this)); 
     this.boundary = $(dragBoundary).css('position', 'relative'); 
    }; 

    Draggable.prototype.handleDragEvent = function(e) { 
     if(window.mousedown) { 

      var mousePosition = this.mapToBoundary([e.clientX, e.clientY]); 
      var mouseX = mousePosition[0], 
       mouseY = mousePosition[1]; 

      if(typeof this.prevMouseX == "undefined") this.prevMouseX = mouseX; 
      if(typeof this.prevMouseY == "undefined") this.prevMouseY = mouseY; 

      this.itemX = this.item.offset().left - this.boundary.offset().left; 
      this.itemY = this.item.offset().top - this.boundary.offset().top; 

      var deltaX = mouseX - this.prevMouseX, 
       deltaY = mouseY - this.prevMouseY; 

      this.item.css({ 
       'left': this.itemX + deltaX, 
       'top': this.itemY + deltaY 
      }); 

      this.prevMouseX = mouseX; 
      this.prevMouseY = mouseY; 

     } 
    }; 

    Draggable.prototype.mapToBoundary = function(coord) { 
     var x = coord[0] - this.boundary.offset().left; 
     var y = coord[1] - this.boundary.offset().top; 
     return [x,y]; 
    }; 

    var draggable = new Draggable($('.draggable'), $('.container')); 

});

注意，我們維持對全球一mousedown價值，使我們能夠確定何時是適當的拖動我們的元素（我們只添加一個mousemove偵聽器到拖動項目本身）。我還在邊界div之上加入了一個間隔div，以演示如何在頁面的任何位置移動邊界，並且座標系統仍然精確。代碼實際上限制在其分配的邊界內的可拖動項目可以使用簡單的數學來書寫。

這裏是小提琴：http://jsfiddle.net/bTh9s/3/

編輯：

這裏開始到一些代碼，限制其容器內的可拖動項目。

Draggable.prototype.restrictItemToBoundary = function() { 

    var position = this.item.position(); 
     position.right = position.left + this.item.outerWidth(); 
     position.bottom = position.top + this.item.outerHeight(); 

    if(position.left <= 0) { 
     this.item.css('left', 1); 
    } else if(position.right >= this.boundary.outerWidth()) { 
     this.item.css('left', this.boundary.outerWidth() - this.item.outerWidth()); 
    } 

    if(position.top <= 0) { 
     this.item.css('top', 1); 
    } else if(position.bottom >= this.boundary.outerHeight()) { 
     this.item.css('top', this.boundary.outerHeight() - this.item.outerHeight()); 
    } 

};

此方法應該在更新拖動項目的CSS定位之後在Draggable.handleDragEvent中調用。看來這個解決方案很糟糕，但這是一個開始。

來源

2014-02-14 02:04:27

相關問題

讓鼠標在鼠標點擊鼠標後跟着鼠標

回答

相關問題