在没有jquery ui的情况下使元素可拖动？

我正在尝试构建一个类似于Twitters的图像裁剪器 – http://jsfiddle.net/yarKr/1/ 。 我坚持的是拖动图像的能力。 如果不诉诸jquery ui ，最好的方法是什么？

我希望能够在.canvas div中移动图像。

Answer 1

像这样的东西会起作用： 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; } .draggable { position:absolute; }

您可以重写此内容并在重新定位时添加某种forms的缓动，更改光标或根据图片上发生初始点击的位置添加更精确的起点，但总体而言，应该让您开始。

Answer 2

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

Answer 3

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

div中有3个可拖动按钮，拖动受div限制。

 
 Drag me Drag me Drag me 
 
 
 

需要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_topdrag_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(''); } }); } }); });