nicht angemeldet
jquery drag&drop copy
Hallo,
ich bin am verzweifeln.
ich habe 4 bloecke nebeneinander in den ersten 3 sollen die items dragable sein auch untereinander in den bloecken.
aus dem 4ten block sollen sich die items geholt werden und in eine der ersten drei bloecke abgelegt werden (dabei sollen sie aus dem 4ten aber nicht gelöscht werden das sind die vorlagen).
also man zieht aus dem vierten block ein item zum beispiel über den 2ten block wenn man loslässt wird im 2ten block eine kopie der vorlage erstellt
vielleicht hat sich ja shconmal jemand damit auseinander gesetzt und kennt sich da besser aus als ich .
Danke im Vorraus Susi.
mein Code:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
<style>
.column ,.builderCol{ width: 170px; float: left; padding-bottom: 100px; background-color:#cccccc;}
.builderCol{background-color:red;}
.portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder \* { visibility: hidden; }
</style>
<div class="demo">
<div class="column">
<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Links</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">Images</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="builderCol">
<div class="portlet">
<div class="portlet-header">Links</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">Images</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div><!-- End demo -->
<script>
$(function() {
$( ".column" ).sortable({
helper : 'clone',
connectWith:'.column'
});
$( ".builderCol" ).sortable({
connectWith:'.column'
});
$(".column").droppable({
drop: function(event, ui) {
$(this).append($(ui.draggable).clone());
}
});
$( ".column" ).disableSelection();
});
</script>
-
hab selber ne Lösung gefunden ;)
/closed