29

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

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

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

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

在小提琴上，您可以看到图像变得可拖动，并且我可以看到我指定的有效设置（不透明度、光标），但图像无法在#drop 上拖放。

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

这是页面代码的简单版本，加上一个 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>

任何帮助是极大的赞赏。

4

2 回答 2

67

这是最终结果的小提琴：

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

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

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

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

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

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

更新：我今天有一些空闲时间，想检查一下是否可以只使用可排序的，你瞧，确实如此。

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

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

于 2013-01-13T23:03:33.797 回答
23

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

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

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：

#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;
}

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

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

链接：

于 2013-01-13T22:51:04.910 回答