HTML 5 和 Javascript 拖放答案

【问题标题】：HTML 5 and Javascript Drag and DropHTML 5 和 Javascript 拖放
【发布时间】：2012-10-23 05:08:06
【问题描述】：

我遇到http://jsfiddle.net/Hh8qJ/ 的问题我知道两个主要问题。一个在 Safari 中不起作用（可能还有 Internet Exploder）。似乎 Safari 中的选项可能无法制成可拖动的对象？同样在 Firefox 中，选项在删除时不会取消选择。这是一个更大项目的一部分，所以我将稍微描述一下我想要完成的事情以及我为什么要冒险走上这条路。所以我选择了下拉菜单，以便可以在其中插入和从中插入元素，如果需要，可以将项目放在下拉菜单的不同位置。在较大的项目中，只会有这些下拉菜单之一，以及许多放置区 div。这些项目将从下拉列表中拖到许多这些放置字段中，但在某些情况下可能需要向后移动。我不确定是否有更好的方法来做到这一点，但这就是我想出的。我想避免使用 JQuery。

感谢您的帮助！

编辑：HTML 在那里，因为我必须输入一些代码，并认为这里没有人想要完整的文件。

我将尝试给出一个更简洁的例子来说明如何实际使用它。假设我有 4 个盒子，上面有车名。盒子上写着萨博、沃尔沃、福特和道奇。任务是将所有汽车从下拉列表中拖到可观的放置区域。然后，如果用户想将汽车放回下拉菜单中，他们可以将它们从放置区拖回下拉菜单，然后将它们按字母顺序放回。（我确实知道现在没有代码来进行 alpabetizing，但我一次尝试一个障碍。）请记住，这是一个非常小的示例，说明我计划如何将其用于更大的项目，这只是我试图使我遇到的问题尽可能简单的一种尝试。

  <html>

【问题讨论】：

这里没有密码框 <html> 是什么意思？
jquery 是您的朋友，旨在解决您所描述的一些跨浏览器问题。您应该修改您的问题以更清楚地理解问题 - 用更少的文字。这将有助于我们为您提供更多帮助。

标签： php javascript html drag-and-drop draggable

【解决方案1】：

这是我的解决方案：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:150px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
 ev.preventDefault();
}

function drag(ev)
{
 ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
 ev.preventDefault();

 var data=ev.dataTransfer.getData("Text");
 ev.target.appendChild(document.getElementById(data));
}
function sort(uList)
{
  var listItem = document.getElementById(uList).getElementsByTagName('li');
  var listLength = listItem.length;
  var list = [];
  for(var i=0; i<listLength; i++)
  list[i] = listItem[i].firstChild.nodeValue;
  list.sort();
  for(var i=0; i<listLength; i++)
  listItem[i].firstChild.nodeValue = list[i];
 }
</script>
</head>
<body>

<ul id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragend="sort('div1')">

    <li id="list-item3"  draggable="true" ondragstart="drag(event)">a</li>
    <li id="list-item5" draggable="true" ondragstart="drag(event)">b</li>
    <li id="list-item2" draggable="true" ondragstart="drag(event)">c</li>
    <li id="list-item4" draggable="true" ondragstart="drag(event)">d</li>
</ul>
<ul id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ondragend="sort('div2')"></ul>

</body>
</html>

我希望它有所帮助:)。我在上面使用了 HTML 5。将一个项目从一个列表拖到另一个列表后，将调用函数 sort()。此函数将用于对列表中的项目进行排序。我还没有在表单元素上尝试过，但我不知道我能做什么。

【讨论】：

顺便说一句..如果你只使用复选框可能会更好。
感谢您的帮助！有几个问题，您可以将这些部分“楔入”彼此之间，您可以在jsfiddle.net/gu9ZT 中尝试尝试将其放在填充区域中，您会明白我的意思。同样，当这种情况发生时，顶部的元素会拖动两个元素。此外，在某些情况下，如果您在单词的右侧太远，或者如果您在移动项目时向下拖动，一次可以移动多个项目。这是我想到的另一种方法，它解决了重叠问题。 jsfiddle.net/gjcPd 以你的排序为例，我也许可以实现排序。在我的有时也是如此
继续：我仍然有倍数会一次移动的问题。这在未来可能是一个不错的功能，并且可能很好实现，但现在它的错误和不可预测性太高，但将来能够选择顶部的功能并能够使用shift 键选择底部的一个，因此可以一次移动多个项目。现在也许有一种方法可以检查多个是否在移动，然后只允许第一个？谢谢！