Даданне і выдаліць DIV на клік з дапамогай JQuery

У мяне ёсць пусты DIV і ў тым, што ў мяне ёсць яшчэ адзін DIV, які перацягвання.

Цяпер, дзе б я націскаю на кантэйнеры перацягваць DIV павінен быць дададзены да (0,0), становішчу і пры націску на кнопку закрыцця трэба выдаліць, што перамяшчаемую div.How мне рабіць гэта?

Гэта тое, што ў мяне ёсць:

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:

<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;
}
3
Я не думаю, што можна зарэгістраваць клікаў на кнопку «Зачыніць», так як вы ствараеце яе ў CSS, а не ў DOM. Зрабіце гэта замест таго, каб: jsfiddle.net/mblase75/g6cdL/42
дададзена аўтар Blazemonger, крыніца
На самай справе ёсць Agood jQuery immage анатацыю убудова, так што я хачу, падобнае на гэта flipbit.co. іч/JQuery-малюнкаў annotation.html
дададзена аўтар coder, крыніца

1 адказы

Змяніць HTML на:

<div id="content" style="background-color: #E5E5E5; width:500px; height:500px;">
    <div class="demo" style="border-style: dashed; background-color: #CCCCCC">
        <div class="closebtn"></div>
    </div>
</div>

Затым зменіце .demo: перад у CSS для .closebtn і дадаць да вашага JavaScript:

$('.closebtn').click(function(e) {
    e.stopPropagation();
    $(this).parent().hide();
});
$('#content').click(function(e) {
    $('.demo').css({top:0,left:0}).show();
});

http://jsfiddle.net/mblase75/g6cdL/48/

1
дададзена
гэта не працуе добра. Пры кожным кліку ён дадае «.demo» DIV. Я маю на ўвазе перацягнуць DIV і націсніце змесціва зноў дадае яго зноў.
дададзена аўтар Sedat Başar, крыніца