如何使用jQuery的拖放事件定義和檢索自定義屬性？

我想要做的是有一個圖標列表，當每個圖標被拖入可投放區域時，我定義的圖標自定義數據被記錄在某個列表的某處。如何使用jQuery的拖放事件定義和檢索自定義屬性？

我想在試圖通過複雜的東西指定自定義數據，每個圖標如型號，名稱，價格等

喜歡的東西...

<div class="draggable"> 
    <img src="icon1.png" width="20" data-price="80" data-name="xxxxxxxxx" data-model="xxxx"> 
</div>

也許我使用drop事件發送數據，而不是僅僅通過遍歷每個img元素並通過jQuery拉動屬性來找到它？

來源

2017-03-06 Coffee bean

如果你想存儲少數屬性，你可以使用數據屬性。

下面是拖放數據屬性的示例實現。
1.拖動：獲取數據屬性並將其存儲爲JSON字符串。
2.放下：獲取JSON字符串並解析它。

function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
function drag(ev) { 
 
    ev.dataTransfer.setData("elem", ev.target.id); 
 
    ev.dataTransfer.setData("data", JSON.stringify(ev.target.dataset)); 
 
} 
 

 
function drop(ev) { 
 
    ev.preventDefault(); 
 
    console.log(JSON.parse(ev.dataTransfer.getData("data"))); 
 
    var element = ev.dataTransfer.getData("elem"); 
 
    ev.target.appendChild(document.getElementById(element)); 
 

 
}

#div1 { 
 
    width: 350px; 
 
    height: 70px; 
 
    padding: 10px; 
 
    border: 1px solid #aaaaaa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
<br> 
 
<img id="drag1" src="https://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" data-price="80" data-name="xxxxxxxxx" data-model="xxxx">

來源

2017-03-06 18:20:29

感謝完整的例子:) –

您可以使用事件的目標對象來查找數據屬性。

var list = []; 
$('.draggable').on('dragstop', function(e, ui){ 
    list.push($(e.target).data('name')); 
});

來源

2017-03-06 17:34:21 Nick

如何使用jQuery的拖放事件定義和檢索自定義屬性？

回答

相關問題