Ik heb een lege div en daarin heb ik nog een div die sleepbaar is.
Nu, waar ik ook op de container klik, moet de versleepbare div worden toegevoegd aan (0,0) positie en wanneer ik op de knop Sluiten klik, moet ik die versleepbare div verwijderen. Hoe doe ik dat?
Dit is wat ik heb:
http://jsfiddle.net/g6cdL/32/
Hier is mijn code:
<div id="content" style="background-color: #E5E5E5; width:500px; height:500px;">
<div class="demo" style="border-style: dashed; background-color: #CCCCCC">
Script:
<script type="text/javascript">
$(function() {
$('.demo').draggable({
containment: '#content',
cursor: 'move',
snap: '#content',
stop: function() {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').text('X: ' + xPos);
$('#posY').text('Y: ' + yPos);
}
})
.resizable();
});
</script>
CSS:
.demo {
position: relative;
height: 200px;
width: 200px;
border: 1px solid #000;
}
.demo:before {
content: '';
position: absolute;
height: 30px;
width: 30px;
top: -16px;
left: -16px;
background: url(http://dummyimage.com/30x30/000/fff&text=close);
border: 1px solid #000;
}
.container
{
background-color: #E5E5E5;
width:500px;
height:500px;
}