jQuery UI Remove Dropped Object -
i'm working on simple jquery ui project. i'm dragging image inside "blue" div empty "red" div.
i can insert image code "red" div, well. want is, after dragging completed, remove first item.
in summary, drag picture div. stick top-left no matter user drops.
<script> var imgcode = '<img src="42.jpg" id="dragpic" alt="42" width="100" height="100">'; //this image code $(function() { $( "#dragpic" ).draggable(); //image draggable $( "#red" ).droppable({ //image has dragged "red" div drop: function( event, ui ) { $( ) .addclass( "reddrop" ) //custom css .html(imgcode); //insert image inside div /* need remove image user dragged. */ } }); }); </script>
you can access item that's being dragged using "ui.draggable" inside "drop" function.
$( "#dragpic" ).draggable(); //image draggable $( "#red" ).droppable({ //image has dragged "red" div drop: function( event, ui ) { $(this).addclass( "reddrop" ).html(ui.draggable); //insert image inside div $(ui.draggable).css({position:''}); //reset position of dragged element /* need remove image user dragged. */ } });
working example: http://jsfiddle.net/ep0ucxcn/
Comments
Post a Comment