Drag and Drop Divs and compare values
I have four divs with custom Attributes like:
<div marker="A">A1</div>
<div marker="A">A2</div>
<div marker="B">A3</div>
<div marker="B">A4</div>
Now I would like to use jquery to make each div drag- and drop-able. Now when a user drags e.g. div A1 on div A2 (vice-verca would alos be possible), it shall compare the marker attribute and if the marker happens to be 开发者_StackOverflowthe same, I want an alert to inform the user about this.
How would I achieve that ? Can I use jquery-only or do I need a plugin for that ?
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
Updated with live demo!
Here, as you can see for yourself, using the draggable() and droppable() methods of jQuery UI, it is easy to achieve what you want... You can see the demo here:
http://vidasp.net/tinydemos/dragging-and-dropping.html
Include jquery ui sortable library...
$("div").sortable({
opacity: 0.6,
revert: true,
cursor: 'move',
update: updateList
});
function updateList() {
var list = $("div").sortable('toArray').toString();
}
var list
will contain the sorted list of the divs... you will have to figure out how to use it.
精彩评论