HTML 5和Javascript拖放

我遇到了問題http://jsfiddle.net/Hh8qJ/我知道兩個主要問題。一個不適用於Safari（也可能是Internet Exploder）。看起來好像Safari中的選項可能無法成爲可拖動對象？同樣在Firefox中，這些選項在丟棄時不會取消選擇。這是一個更大項目的一部分，所以我會稍微描述一下我試圖完成的事情，以及爲什麼我冒險走過了我所做的道路。因此，我選擇了下拉菜單，以便元素可以插入其中，並且如果需要的項目可以放在下拉菜單的不同位置。在較大的項目中，將只有其中一個下拉菜單，以及許多放置區域的div。這些項目將從下拉菜單拖放到其中的許多拖放區域，但在某些情況下可能需要向後拖動。我不確定是否有更好的方法來做到這一點，但這是我想出的。我想避免JQuery。HTML 5和Javascript拖放

謝謝你的幫助！

編輯：HTML是在那裏，因爲我不得不在一些代碼，並認爲沒有人想在這裏完整的文件。

我會嘗試給出一個更簡潔的例子，說明如何實際使用它。假設我有4個箱子，有汽車名稱。這些箱子說薩博，沃爾沃，福特和閃避。任務是從所有汽車的下拉拖拉到可敬的放置區域。然後，如果用戶想要將汽車放回原位，他們可以將它們從拖放區拖回到下拉列表中，然後將它們按照字母順序排列。（我知道現在沒有代碼來進行alpabetizing，但我一次只嘗試一個障礙。）請記住，這是一個非常小的範例，說明我有計劃將它用於更大的項目，這只是我正在努力使問題變得儘可能簡單。

<html>

來源

2012-10-23 dannyn382

在這裏代碼框的安寧什麼''是什麼意思？ –

jquery是你的朋友，意在解決你所描述的一些跨瀏覽器問題。你應該修改你的問題，以更清楚地理解問題 - 用更少的話來說。這將幫助我們更多地幫助你。 –

這裏是我的解決方案：

<!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-23 09:13:22 jaycroll

btw ..如果你只是使用複選框可能會更好。 – jaycroll

謝謝你的幫助！有幾個問題，你可以將這些碎片「楔入」彼此之間，你可以嘗試在http://jsfiddle.net/gu9ZT/嘗試將它放入填充區域，你會明白我的意思。此外，當發生這種情況時，頂部拖動兩個元素。同樣在某些情況下，似乎當你對單詞太偏右時，或者如果在移動某個項目時向下拖動，則一次可以移動多個項目。這是我想到的另一種方式，它解決了重疊問題。 http://jsfiddle.net/gjcPd/隨着你排序的例子，我可能能夠實現排序。在我的，以及有時 – dannyn382

繼續：我仍然有問題的倍數會一次移動。這可能是未來的一個很好的功能，並且可能很好實現，但是現在它太麻煩並且不可預測，但是在將來可能很好，例如選擇最上面的一個並且能夠使用Shift鍵選擇最下面的一個，所以多個項目可以一次移動。現在也許會有一種方法來檢查多個移動，然後只允許第一個？謝謝！ – dannyn382

HTML 5和Javascript拖放

回答

相關問題