Aquí está el código que tengo, pero aún no logro nada...
No puedo hacer que NINGUN elemento quede sobre el
Div#i10
Alguna idea?.... U otro método para lograr esto?
Gracias!
Código HTML:
Ver original <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>');
}
});
#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;
}
<div id="i01" class="object"></div> <div id="i10" class="object"></div>