使用jquery添加和删除点击div [英] Adding and remove div on click using jquery

问题描述

现在无论我点击容器的哪个位置，都应该将可拖动div添加到（0 ，0）的位置和当点击关闭按钮时，我需要删除那个可拖动div。我该怎么做？

这是我的：

http://jsfiddle.net/g6cdL/32/

以下是我的代码：

 < div id =content style =background-color：＃E5E5E5; width：500px; height：500px;> 
< div class =demostyle =border-style：dashed; background-color：#CCCCCC> 
  

脚本：

 < script type =text / javascript> 
 $（
 $ b $（'。demo'）。draggable（{
 
 containment：'#content'，
 cursor： 'move'，
 snap：'#content'，
 stop：function（）{
 var offset = $（this）.offset（）; 
 var xPos = offset。 （'＃x'）; 
 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：之前{
 content：''; 
位置：绝对; 
 height：30px; 
 width：30px; 
 top：-16px;剩余
：-16px; 
 background：url（http://dummyimage.com/30x30/000/fff&text=close）; 
 border：1px solid＃000; 
} 
 
 .container 
 {
 background-color：＃E5E5E5; 
 width：500px; 
 height：500px; 
} 
  

解决方案

/ p>

 < div id =contentstyle =background-color：＃E5E5E5; width：500px; height：500px; > 
< div class =demostyle =border-style：dashed; background-color：#CCCCCC> 
< div class =closebtn>< / div> 
< / div> 
< / div> 
  

然后在您的 .demo：before 之前改变CSS to .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/

I have an empty div and in that I have another div which is draggable.

Now wherever I click on the container the draggable div should be appended to (0,0) position and when clicked close button I need to remove that draggable div.How do I do that?

This is what I have:

http://jsfiddle.net/g6cdL/32/

Here is my 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;
}

解决方案

Change your HTML to:

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

Then change .demo:before in your CSS to .closebtn and add this to your 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/

这篇关于使用jquery添加和删除点击div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！