jQuery 可在两个容器之间拖动和放置并且可排序

jQuery draggable and droppable between two containers and sortable

提问by GR7

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

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

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.

1. 页面将有两个 div：一个是 #origin，包含大量缩略图，第二个是 #drop，可以放置图像（最多 3 个）。
2. 需要可以将图像从#drop 拖回原点。
3. #drop 需要可排序，因为 3 个选定图像的顺序很重要。
4. 当放在#drop 上时，图像应该对齐，就好像它们从一开始就是这样显示的。

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，之前我什至有一个工作页面原型，我已经通过原生 HTML5 拖放事件在两个容器之间进行了拖放，但是当我将 sortable() jquery 功能添加到 #drop 时，图像无法再拖回#origin，这破坏了我的功能。

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.

因此，我重新开始并希望使用 jQuery 实现拖放功能以及可排序功能。我已经阅读了几乎所有可拖动、可放置和可排序功能的整个 API，但我无法让它工作。不确定这是否是我为每个功能使用的设置。

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 上。

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.

据我了解，使图像可拖动、具有“可拖动”类的图像以及使用“.draggable”接受的 #drop droppable 的组合，它应该允许最基本的功能，但即使这样似乎也没有采取。我还读到，如果 draggable 和 droppable 具有相同的“范围”设置，它也应该有效，但事实并非如此。

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

这是页面代码的简单版本，加上一个 jsFiddle：http: //jsfiddle.net/39khs/

Code:

代码：

css:

css：

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

js:

js：

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

html:

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.

任何帮助是极大的赞赏。

回答by GR7

Here's the fiddle with the final result:

这是最终结果的小提琴：

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

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

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:

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

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

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.

我不知道为什么 jQuery 没有真正从旧容器中删除拖动的元素并将其添加到新容器中，但这是新放置的项目正确显示而不仅仅是放置的位置必须做的事情，无视 css 放置/样式。

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

关键是@Barry Pitman 在以下 SO 问题上：

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

jQuery draggable + droppable：如何将放置的元素捕捉到放置的元素

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

更新：我今天有一些空闲时间，想检查一下是否可以通过 sortable 来实现，瞧，确实如此。

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

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

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.

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

回答by Dom

If you want to use .droppable(), .draggable(), & .sortable(), then you only need to use .sortable().

如果你想使用.droppable(), .draggable(), & .sortable()，那么你只需要使用.sortable().

Using your jsfiddle, I made the following changes:

使用您的 jsfiddle，我进行了以下更改：

HTML:

HTML：

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

JAVASCRIPT:

爪哇脚本：

$( "#sort1, #sort2" ).sortable({
      helper:"clone", 
      opacity:0.5,
      cursor:"crosshair",
      connectWith: ".list",
      receive: function( event, ui ){ //this will prevent move than 3 items in droppable list
         if($(ui.sender).attr('id')==='sort1' && $('#sort2').children('li').length>3){
           $(ui.sender).sortable('cancel');
         }
      }
});

$( "#sort1,#sort2" ).disableSelection();

CSS:

CSS：

#origin
{
  background-color: green;
}
#drop
{
  background-color: red;
  min-height: 120px;
}
.list
{ 
  min-height: 120px;
} 
.list li
{
 display: inline-block;
 list-style-type: none;
 padding-right: 20px;
}

DEMO: http://jsfiddle.net/39khs/80/

演示：http: //jsfiddle.net/39khs/80/

Hope this helps and let me know if you have any questions!

希望这会有所帮助，如果您有任何问题，请告诉我！

---

---

链接：

• http://api.jqueryui.com/sortable/

• http://api.jqueryui.com/sortable/