Toevoegen en verwijderen van div op klik met jQuery

Question

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

toegevoegd 27 oktober 2011 op 04:22 de auteur coder

Bekeken: 15

de bron

ro ru fr es pt de zh hi bn ar be uk

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 27 oktober 2011 op 04:41, 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 27 oktober 2011 op 04:42, de auteur coder, de bron

1 antwoord

de auteur Blazemonger · Answer 1 · 2011-10-27T04:46Z

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/