www.webdeveloper.com
Results 1 to 2 of 2

Thread: Drag & Drop

  1. #1
    Join Date
    Aug 2012
    Posts
    2

    Drag & Drop

    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>

  2. #2
    Join Date
    Aug 2012
    Posts
    2

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles