没有jQuery UI可以拖动元素？

我正在尝试构建一个类似于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内拖动图像。

来源

2013-07-21 ditto

如果你不担心旧的浏览器，使用HTML5拖放。 – keune

这是一个很好的代码块，但没有什么特别的。聆听mousedown，找到并保持当前偏移量和鼠标事件pageX/pageY，设置绝对位置，侦听mousemoves，从原始鼠标位置计算delta，将更新的位置设置为原始偏移量+ delta。监听mouseup以停止mousemove监听器。 – AdamKG

本文可能会帮助您开始使用：http://www.html5rocks.com/en/tutorials/dnd/basics/ – chrisweb

像这样将工作：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; }

你可以重写它并添加某种形式的缓解了重新定位，改变光标或根据图片上的初始点击发生的位置添加更精确的起点，但总体而言，应该让您开始。

来源

2013-07-21 19:58:38 frenchie

如何在拖动时将位置设置为绝对位置并将其设置为鼠标位置或靠近鼠标位置？

来源

2013-07-21 19:45:44

这是我的。 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(''); 
       } 
      }); 
     } 
    }); 
});

来源

2015-02-27 01:30:34 Richard

如果两个问题如此相似，您可以逐字重新发布答案，则应该标记为关闭一个为重复另一个。 –

没有jQuery UI可以拖动元素？

回答

相关问题