glisser-déposer et divs comparer les valeurs

Question

j'ai quatre divs avec des attributs personnalisés comme:

<div marker="A">A1</div> 
<div marker="A">A2</div> 
<div marker="B">A3</div> 
<div marker="B">A4</div> 

Maintenant, je voudrais utiliser jquery pour faire de chaque div glisser- drop-mesure. Maintenant, lorsqu'un utilisateur fait glisser par ex. div A1 sur div A2 (vice-verca serait également possible), il doit comparer l'attribut marqueur et si le marqueur se trouve être le même, je veux une alerte pour informer l'utilisateur à ce sujet.

Comment pourrais-je y parvenir? Puis-je utiliser jquery-only ou ai-je besoin d'un plugin pour cela?

Answer 1

http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/

Mise à jour avec la démo en direct!

Ici, comme vous pouvez le voir par vous-même, en utilisant les méthodes draggable() et largable() de jQuery UI, il est facile de réaliser ce que vous voulez ... Vous pouvez voir la démo ici:

http://vidasp.net/tinydemos/dragging-and-dropping.html

Answer 2

Inclure la bibliothèque triables jquery ui ...

$("div").sortable({ 
    opacity: 0.6, 
    revert: true, 
    cursor: 'move', 
    update: updateList 
}); 

function updateList() { 
    var list = $("div").sortable('toArray').toString(); 
} 

var list contiendra la liste triée des divs ... vous aurez à comprendre comment l'utiliser.