Hallo,
Ich möchte per Drag & Drop eine "Box" verschieben.
Beim einfachen Drag & Drop klappt das soweit ganz gut.
Sobald ich dann allerdings die abgelegte Box wieder verschiebe und nach unten platziere, wird diese zu weit nach unten abgelegt.
Ich hoffe ich hab mich einigermaßen verständlich ausgedrückt!?
Wo hab ich einen Fehler drin?
Hier der Code:
Ich möchte per Drag & Drop eine "Box" verschieben.
Beim einfachen Drag & Drop klappt das soweit ganz gut.
Sobald ich dann allerdings die abgelegte Box wieder verschiebe und nach unten platziere, wird diese zu weit nach unten abgelegt.
Ich hoffe ich hab mich einigermaßen verständlich ausgedrückt!?
Wo hab ich einen Fehler drin?
Hier der Code:
Code:
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#optionen { width: 80px; height: 200px; border: 1px solid gray; padding: 5px; }
.draggable { height: 60px; }
.droppable { width: 80px; height: 60px; border: 1px solid gray; padding: 10px; }
.bez { margin-left:10px; border: 1px solid gray;}
#platz { position:absolute; top:10px; left:150px; }
</style>
<script>
$(document).ready(function() {
$(".draggable").draggable({
helper: 'clone',
revert : true
});
$(".droppable").droppable({
accept: '.draggable',
drop: function(event, ui) {
var element = $(ui.draggable).clone();
$(this).empty().append(element);
ui.helper.remove();
element.draggable();
}
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="platz">
<div class="droppable"></div>
<br>
<div class="droppable"></div>
</div>
<div id="optionen">
<div class="draggable">
<div class="bez">Test</div>
</div>
<div class="draggable">
<div class="bez">Test2</div>
</div>
</div>
</body>
</html>
