jQuery在两个容器之间可拖放 [英] jQuery draggable and droppable between two containers and sortable

问题描述

我正在尝试开发一个具有以下功能的小页面：

Im trying to develop a small page that has the following functionality:

1. 页面将具有两个div：一个是#origin，包含很多缩略图，第二个是#drop，可以将其拖放到图像上（最多3张）。


2. 需要将其拖放到图像从#drop放回原点。


3. #drop必须可排序，因为选择的3张图像的顺序很重要。


4. 放到#drop，图像应该对齐，就像原始图像从一开始就显示一样。

1. Page will have two divs: one being #origin, containing a lot of thumbnail images, and the second one will be #drop, where the images can be dropped on (up to 3 only).
2. it needs to be possible to drag-drop the images from #drop back to origin.
3. #drop needs to be sortable, since the order of the 3 selected images matter.
4. When dropped on #drop, the images should align, as if they had original been displayed like that from the start.

我以前从未使用过jQuery ，甚至以前我都有一个工作页面原型，通过本地HTML5拖放事件，我已经在两个容器之间进行了拖放，但是当我将sortable（）jQuery功能添加到#drop时，图像将不再是拖回#origin，这破坏了我的功能。

I had never used jQuery before, and I even had a working page prototype before, where I already had the drag and drop between two containers through native HTML5 drag and drop events, but when I added the sortable() jquery functionality to #drop, the images could no longer be dragged back to #origin, which breaks my functionality.

所以，我从头开始，想要实现同时拖动删除功能以及可排序的jQuery。我已经阅读了几乎所有有关可拖动，可拖放和可排序功能的完整API，但是我很难使它正常工作。不确定是否是我为每种功能使用的设置。

So, I started over and wanted to implement both the drag & drop functionality as well as the sortable with jQuery. I've read pretty much the whole API for all draggable, droppable and sortable functionality, but I'm having trouble getting this to work. Not sure if it's the settings I'm using for each functionality.

在小提琴上，您可以看到图像变得可拖动，并且可以看到实际上指定的设置（不透明度，光标），但是不能将图像放在＃下降。

On the fiddle, you can see that the images become draggable and I can see the settings I specify in effect (opacity, cursor), but the images cant be dropped on #drop.

根据我的理解，这些组合包括使图像可拖动，图像具有可拖动类以及使#drop可拖放并接受 .draggable，它应该允许最基本的功能，但即使如此，这似乎也不是必须的。我还读到，如果可拖动和可拖放都具有相同的作用域设置，那么它也应该起作用，但事实并非如此。

From what I understand, the combination of making images draggable, the images having a "draggable" class, and making #drop droppable with an accepts of ".draggable", it should allow the most basic functionality, but even that doesn't seem to take. Also I read that if both draggable and droppable have the same "scope" setting, it should also work, but it isn't.

这是页面的简单版本代码和jsFiddle： http://jsfiddle.net/39khs/

Here's a simple version of the page's code, plus a jsFiddle: http://jsfiddle.net/39khs/

代码：

css：

#origin {
  background-color: green;
}
#drop {
  background-color: red;
  min-height: 120px;
}

js：

$("img").draggable({ helper: "clone", opacity: 0.5, cursor: "crosshair", scope: "drop" });
$("#drop").droppable({ accept: ".draggable", scope: "drop"});
$("#drop").sortable();

html：

<div id="wrapper">
    <div id="origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
        <img src="http://placehold.it/140x100" id="two" title="two" class="draggable" />
        <img src="http://placehold.it/140x100" id="three" title="three" class="draggable" />
    </div>
  <p>test</p>
    <div id="drop" class="fbox">

    </div>
</div>

任何帮助都将不胜感激。

Any help is greatly appreciated.

推荐答案

以下是最终结果的小提琴：

Here's the fiddle with the final result:

http://jsfiddle.net/39khs/82/

关键是要手动处理放置事件从#origin删除删除的图像，并将其添加到#drop。这实际上是我在第一个实现上所做的，但不知道如何使用jQuery完全做到这一点：

The key was to handle the "drop" event and manually removing the dropped image from #origin and add it to #drop. That is actually what I was doing on the first implementation, but did not know how to do it exactly with jQuery:

 $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);

我不确定为什么jQuery不会真正从旧容器中删除拖动的元素并将其添加到新的东西，但这就是要使新放置的项目正确显示而不仅仅是放置的确切位置的方法，而无需考虑css的放置/样式。

I am not sure why jQuery does not really remove the dragged element from the old container and add it to the new one, but that is what had to be done for the newly dropped item to display correctly and not just exactly where it was dropped, disregarding css placing/styling.

关键点是@Barry Pitman提出的以下SO问题：

The key line was by @Barry Pitman on the following SO question:

jQuery draggable + droppable: how to snap dropped element to dropped-on element

更新：我今天有一些空闲时间，想检查一下是否可以使用sortable进行排序，瞧瞧，确实可以。

UPDATE: I had some spare time today and wanted to check if it was possible with just sortable, and lo and behold, it was.

http://jsfiddle.net/wj4ak/5/

只有两行代码允许从一个容器拖放到另一个容器，并对项目进行排序。他们根本不需要在ul / ol列表中。一件令人烦恼的事情是，我不打算使origin div上的项目可排序，但是我现在可以接受。

just two lines of code allow dragging and dropping from one container to another, and sorting the items. They do not need to be inside ul/ol lists at all. The one annoying thing is that I did not intend to make the items on the origin div sortable, but it's something I can live with for now.

这篇关于jQuery在两个容器之间可拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！