Toevoegen en verwijderen van div op klik met jQuery

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;
}
3
Ik denk niet dat het mogelijk is om klikken op de knop "Sluiten" te registreren, omdat je deze in CSS maakt in plaats van in de DOM. Doe dit in plaats daarvan: jsfiddle.net/mblase75/g6cdL/42
toegevoegd de auteur Blazemonger, de bron
Eigenlijk is er een goede jQuery immage annotatie plugin dus ik wil vergelijkbaar zijn met deze flipbit.co. uk/jquery-image-annotation.html
toegevoegd de auteur coder, de bron

1 antwoord

Verander uw HTML in:

<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>

Wijzig vervolgens .demo: before in uw CSS in .closebtn en voeg dit toe aan uw 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
toegevoegd
dit werkt niet goed. Bij elke klik voegt het een ".demo" div. Ik bedoel, sleep de div en klik opnieuw op inhoud en deze wordt opnieuw toegevoegd.
toegevoegd de auteur Sedat Başar, de bron