Hello!
I have a question about jQuery UI Draggable and methods () and droppable ()
How I can make ANY <div> is over of <div.i10> or the news <div.i01> on the #box?
Thanks
This is my code:
Code:<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#i01').draggable({ revert: "invalid", helper: "clone", containment: '#box', grid: [10,10], appendTo: "#box", start: function(){ $(this).css("border","2px solid red"); } }); $('#box').droppable({ tolerance: 'touch', drop: function(event, ui){ $(ui.draggable).css("border","1px dashed black"); var idiv = ui.draggable.attr("id"); var x_left = ui.position.left; var x_top = ui.position.top; createObjet_(idiv,x_left,x_top); } }); function createObjet_(div,x_left,x_top){ $('#box').append('<div id="'+div+'" class="object" style="position: absolute; left: '+x_left+'px; top: '+x_top+'px;"></div>'); } }); </script> </head> <style type="text/css"> #edi{ float: left; width: 100px; height: 600px; margin-right: 20px ; border: 1px solid black; } #box { float: left; width: 800px; height: 600px; border: 1px solid black; } .object { width: 90px; height: 90px; border: 1px dashed black; } #i01 { background: rgba(150,160,170,0.7); } #i10 { background: rgba(250,220,114,0.7); position: relative; left: 100px; top: 67px; } </style> <body> <div id="cont"> <div id="edi"> <div id="i01" class="object"></div> </div> <div id="box"> <div id="i10" class="object"></div> </div> </div> </body> </html>
Reply With Quote
Bookmarks