开发者

Drag and Drop Divs and compare values

开发者 https://www.devze.com 2023-01-20 14:47 出处:网络
I have four divs with custom Attributes like: <div marker=\"A\">A1</div> <div marker=\"A\">A2</div>

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消