在没有JQuery UI的情况下拖放

I searched a lot to find a tutorial for drag & drop with jQuery alone (without UI), but due to the popularity of JQuery UI, all drag and drop features are based on JQuery UI.

我经常搜索一下jQuery的拖放教程(没有UI),但由于JQuery UI的普及,所有的拖放功能都基于JQuery UI。

Can anyone give me a hint how to make a basic Drag & Drop by JQuery standalone?

任何人都可以给我一个提示如何通过JQuery独立进行基本的拖放操作?

6 个解决方案

#1

I think a good starting place might be to map out the process, and then decide which jQuery tools you will need to use for each user action.

我认为一个好的起点可能是制定流程,然后决定每个用户操作需要使用哪些jQuery工具。

so the user process might be:

所以用户进程可能是:

Click on your content div on a "draggable" area

在“可拖动”区域单击您的内容div

Drag the content, which will keep the content inside that div

拖动内容,这将内容保留在div中

release the mouse, which will put the content into a "droppable" container, which will adjust the size of the previous content to fit the droppable size

释放鼠标,将内容放入“可放置”容器中,该容器将调整先前内容的大小以适合可放置的大小

which needs the following types of event listeners:

需要以下类型的事件侦听器:

mouseup
mousedown
animate

At the very least. Another option might be to check out the jQuery UI source, and see how they do it! Which will tell you exactly what to do but you can add to it or trim where necessary.

至少。另一种选择可能是检查jQuery UI源,看看他们是如何做到的!这将告诉你究竟该做什么,但你可以添加到它或必要时修剪。

#2

There are several plugins that you may use take a look at the following

您可以使用几个插件来查看以下内容

http://wayfarerweb.com/jquery/plugins/animadrag/

http://threedubmedia.com/code/event/drag/demo/

it still jquery but no UI

它仍然是jquery但没有UI

#3

http://thezillion.wordpress.com/2012/09/27/javascript-draggable-2-no-jquery

See this. It's core JS and easy to implement.

看到这个。它是核心JS,易于实现。

#4

I found this one very useful: http://draggabilly.desandro.com/

我发现这个非常有用:http://draggabilly.desandro.com/

#5

Came across the same problem, and 33.4 kilobytes for the minified jqueryUI with only draggable and droppable is too large for the limited functionality I needed. The approach below isn't working code - it's just a simple structure to visualize what needs to happen.

遇到同样的问题,33.4千字节的缩小jqueryUI只有draggable和droppable对于我需要的有限功能来说太大了。下面的方法不是工作代码 - 它只是一个简单的结构,可视化需要发生的事情。

$('.draggable').on{
  mousemove : function(){
    var mouseposition = { // this also needs to account for onclick offset of pointer vis-a-vis element
        x : pageX,
        y : pageY 
    };
    $(this).css({
      top : mouseposition.y,
      left : mouseposition.y
    });
  if( // this statement is kinda bogus, idea is to perform a collision detection via coordinate comparison
    $('.draggable').offset().top < $(.droppable').offset().top 
    &&
    $('.draggable').offset().left < $(.droppable').offset().left
  ) {
      alert('the item has been dropped');
  }
  }
});

#6

I understand this is an old post, but i was also interested in doing this without Jquery UI. I checked the links above, but i found this to be the best. It's only 8kb minified (UI sortable ~30, i've read), and is independent of any mammoth JQuery library (although those CAN make our lives easier sometimes).

我知道这是一篇旧帖子,但我也有兴趣在没有Jquery UI的情况下这样做。我检查了上面的链接,但我发现这是最好的。它只有8kb缩小(UI可排序~30,我读过),并且独立于任何庞大的JQuery库(尽管这些可以使我们的生活更轻松)。

#1