我遇到http://jsfiddle.net/Hh8qJ/问题,我知道两个主要问题。一个在Safari(可能还有Internet Exploder)中不起作用。似乎Safari中的选项可能无法变成可拖动对象?同样在Firefox中,删除选项时不会取消选择。这是一个较大项目的一部分,因此我将在某种程度上描述我要完成的工作以及为什么要冒险走自己的道路。因此,我选择了下拉列表,以便可以将元素插入到该下拉列表中或从中插入元素,如果需要,可以将项目放在该下拉列表的不同位置。在较大的项目中,将只有这些下拉菜单之一,并且有许多下拉区域div。这些项目将从下拉列表中拖到许多这些下拉字段中,但在某些情况下可能需要向后移动。我不确定是否有更好的方法可以做到这一点,但这就是我的想法。我想避免使用JQuery。

谢谢您的帮助!

编辑:HTML在那里,因为我不得不放入一些代码,并且发现没人在这里想要完整的文件。

我将尝试给出一个更简洁的示例,说明如何实际使用它。假设我有4个带有汽车名称的盒子。箱子上有萨博,沃尔沃,福特和道奇。任务是将所有车辆从下拉的位置拖入可观的下降区域。然后,如果用户希望将汽车放回下拉列表中,他们可以将其从拖放区拖回下拉列表中,然后将其放回字母顺序。 (我确实知道现在没有代码可以进行整理,但是我一次尝试了一个障碍。)请记住,这是一个非常小规模的示例,说明了我打算如何将其用于更大的项目,这只是我要使我遇到的问题尽可能简单的一种尝试。

  <html>

最佳答案

这是我的解决方案:

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

10-07 19:18
查看更多