1

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

谢谢您的帮助！

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

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

  <html>
4

1 回答 1

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()。此函数将用于对列表中的项目进行排序。我还没有在表单元素上尝试过，但我不知道我能做什么。

于 2012-10-23T09:13:22.037 回答