在没有jquery ui的情况下使元素可拖动？ [英] Making an element draggable without jquery ui?

问题描述

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

I'm trying to build an image cropper similar to Twitters - http://jsfiddle.net/yarKr/1/. What I'm stuck on is the ability to drag the image. What is the best way to do this without resorting to 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内移动图像。

I want to be able to move drag the image around inside the .canvas div.

推荐答案

这样的事情会起作用： jsFiddle

Something like this will work: 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 ; }

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

You could rewrite this and add some form of easing on the repositioning, change the cursor or add a more precise starting point based on where the initial click happened on the picture but overall, that should get you started.

这篇关于在没有jquery ui的情况下使元素可拖动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！