У меня есть пустой div, и в этом у меня есть еще один div, который можно перетаскивать.
Теперь, куда бы я ни щелкнул по контейнеру, перетаскиваемый div должен быть добавлен в (0,0) положение, а когда нажата кнопка закрытия, мне нужно удалить этот перетаскиваемый div. Как это сделать?
Вот что у меня есть:
http://jsfiddle.net/g6cdL/32/
Вот мой код:
<div id="content" style="background-color: #E5E5E5; width:500px; height:500px;">
<div class="demo" style="border-style: dashed; background-color: #CCCCCC">
Сценарий:
<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;
}