Drag & Drop mit jQuery

Erstellt am 15. Juli 2007
  in
 
758
vote

Mit jQuery und dem Interface Plug-In, kann man sehr einfach einen Drag & Drop Effekt realisieren.
Als Beispiel möchte ich den Inhalt von DIV Boxen in Formularfelder einfügen:


$(document).ready(function()
{

$(’#divs div’).Draggable(
{
zIndex: 1000,
ghosting: true,
revert: true,
opacity: 0.7
}
);

$(’#textareas textarea’).Droppable(
{
accept : ‘dropaccept’,
tolerance: ‘intersect’,
ondrop: function (drag)
{
$(this).val($(drag).html());
}
}
);

});

Online Demo

Kommentare

Do, 08/14/2008 - 20:09 – Marvin (nicht überprüft)

Vielen Dank für diesen

Vielen Dank für diesen nützlichen Beitrag,
hat mir sehr gut geholfen.

Do, 01/22/2009 - 10:55 – Basti (nicht überprüft)

Gefällt mir sehr gut.

Gefällt mir sehr gut. Leider funktionierts bei mir nicht. Ich binde zwar die JQuery und die Interface js Dateien in meine html Seite ein, aber leider gehts ned? Was mach ich falsch?

Mi, 06/03/2009 - 19:19 – Webagentur (nicht überprüft)

Das kannte ich von JQUERY

Das kannte ich von JQUERY vorher noch gar nicht ... vielen Dank!

Mo, 02/22/2010 - 15:58 – Erek Röös (nicht überprüft)

Genau das, was ich gesucht

Genau das, was ich gesucht habe :-) Vielen vielen Dank :-)

Di, 03/02/2010 - 22:47 – jBesucher (nicht überprüft)

Der Drop Event Handler

Der Drop Event Handler heißt in aktueller JQuery UI nun "drop", also:
$('#textareas textarea').droppable( {
// ...
drop: function (drag)
{
// ...
}
}