2013-07-21 202 views
3

我正在嘗試構建一個類似於Twitters的圖像裁剪器 - http://jsfiddle.net/yarKr/1/。我所困擾的是拖拽圖像的能力。什麼是最好的辦法做到這一點而不訴諸於jquery ui沒有jQuery UI可以拖動元素?

<div class="canvas"> 
    <span class="window"></span> 
    <img src="http://www.dailystab.com/blog/wp-content/uploads/2009/03/katy-perry-esquire-4.jpg" class="draggable" /> 
</div> 

我希望能夠在.canvas div內拖動圖像。

+0

如果你不擔心舊的瀏覽器,使用HTML5拖放。 – keune

+0

這是一個很好的代碼塊,但沒有什麼特別的。聆聽mousedown,找到並保持當前偏移量和鼠標事件pageX/pageY,設置絕對位置,偵聽mousemoves,從原始鼠標位置計算delta,將更新的位置設置爲原始偏移量+ delta。監聽mouseup以停止mousemove監聽器。 – AdamKG

+0

本文可能會幫助您開始使用:http://www.html5rocks.com/en/tutorials/dnd/basics/ – chrisweb

回答

4

像這樣將工作:jsFiddle

var TheDraggable = null; 

$(document).ready(function() { 

    $('.draggable').on({ 
     mousedown: function() { TheDraggable = $(this); }, 
     mouseup: function() { TheDraggable = null; } 
    }); 

    $(document).mousemove(function (e) { 

     if (TheDraggable) { 

      TheDraggable.css({'top': e.pageY, 'left': e.pageX}); 
     } 
    }); 
}); 

然後爲CSS你補充一點:.draggable { position:absolute; }

你可以重寫它並添加某種形式的緩解了重新定位,改變光標或根據圖片上的初始點擊發生的位置添加更精確的起點,但總體而言,應該讓您開始。

0

如何在拖動時將位置設置爲絕對位置並將其設置爲鼠標位置或靠近鼠標位置?

0

這是我的。 http://jsfiddle.net/pd1vojsL/

3在div中可拖動的按鈕,由div限制拖動。

<div id="parent" class="parent"> 
    <button id="button1" class="button">Drag me</button> 
    <button id="button2" class="button">Drag me</button> 
    <button id="button3" class="button">Drag me</button> 
</div> 
<div id="log1"></div> 
<div id="log2"></div> 

需要的JQuery(只):

$(function() { 
    $('.button').mousedown(function(e) { 
     if(e.which===1) { 
      var button = $(this); 
      var parent_height = button.parent().innerHeight(); 
      var top = parseInt(button.css('top')); //current top position 
      var original_ypos = button.css('top','').position().top; //original ypos (without top) 
      button.css({top:top+'px'}); //restore top pos 
      var drag_min_ypos = 0-original_ypos; 
      var drag_max_ypos = parent_height-original_ypos-button.outerHeight(); 
      var drag_start_ypos = e.clientY; 
      $('#log1').text('mousedown top: '+top+', original_ypos: '+original_ypos); 
      $(window).on('mousemove',function(e) { 
       //Drag started 
       button.addClass('drag'); 
       var new_top = top+(e.clientY-drag_start_ypos); 
       button.css({top:new_top+'px'}); 
       if(new_top<drag_min_ypos) { button.css({top:drag_min_ypos+'px'}); } 
       if(new_top>drag_max_ypos) { button.css({top:drag_max_ypos+'px'}); } 
       $('#log2').text('mousemove min: '+drag_min_ypos+', max: '+drag_max_ypos+', new_top: '+new_top); 
       //Outdated code below (reason: drag contrains too early) 
       /*if(new_top>=drag_min_ypos&&new_top<=drag_max_ypos) { 
        button.css({top:new_top+'px'}); 
       }*/ 
      }); 
      $(window).on('mouseup',function(e) { 
       if(e.which===1) { 
        //Drag finished 
        $('.button').removeClass('drag'); 
        $(window).off('mouseup mousemove'); 
        $('#log1').text('mouseup'); 
        $('#log2').text(''); 
       } 
      }); 
     } 
    }); 
}); 
+0

如果兩個問題如此相似,您可以逐字重新發布答案,則應該標記爲關閉一個爲重複另一個。 –

相關問題