复制、删除并拖动div

最新推荐文章于 2019-01-12 16:33:36 发布
最新推荐文章于 2019-01-12 16:33:36 发布
阅读量1.6k 收藏
点赞数
分类专栏： html+css+js/jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_35468322/article/details/53816516
版权
源码下载：链接： https://pan.baidu.com/s/1F-3_zqIQ5V4_MzWv6EVikQ 密码：riq3 
<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <style type="text/css">
      .dd-demo1 {
        width: 160px;
        height: 160px;
        border: 2px solid #d3d3d3;
        position: absolute;
        background: url('img/bigDiv.png');
        overflow: hidden;
        word-break:break-all;
      }
      .dd-demo2 {
        width: 160px;
        height: 80px;
        border: 2px solid #d3d3d3;
        position: absolute;
        background: url('img/smallDiv.png');
        overflow: hidden;
        word-break:break-all;
      }
      
      .proxy {
        border: 1px dotted #333;
        width: 160px;
        height: 160px;
        text-align: center;
        background: #fafafa;
      }
      
      #dd1 {
        background: url('img/bigDiv.png');
        left: 20px;
        top: 20px;
      }
      
      #dd2 {
        background: url('img/smallDiv.png');
        left: 20px;
        top: 200px;
      }
      
      .direction{
        width: 50px;
        height: 50px;
        position: absolute;
      }
      #right{
        left:105px; 
        top:360px;
      }
      #left{
        left:20px; 
        top:325px;
      }
      #up{
        left:80px; 
        top:300px;
      }
      #down{
        left:45px; 
        top:390px;
      }
    </style>
  </head>
  
  <body>
      <div id="all">
        <div id="dd1" title="拖动我试试" class="dd-demo1">
        </div>
        <div id="dd2" title="拖动我试试" class="dd-demo2">
        </div>
        <div id="writeSth" style="float: inherit;display: none;">
          <input type="text" id="content">
        </div>
        <div id="right" class="direction" style="background: url('img/right.png'); background-repeat: no-repeat;background-size: 50px 16px;">
        </div>
        <div id="left" class="direction" style="background: url('img/right.png'); background-repeat: no-repeat;background-size: 50px 16px;transform:rotate(180deg);">
        </div>
        <div id="up" class="direction" style="background: url('img/right.png'); background-repeat: no-repeat;background-size: 50px 16px;transform:rotate(-90deg);">
        </div>
        <div id="down" class="direction" style="background: url('img/right.png'); background-repeat: no-repeat;background-size: 50px 16px;transform:rotate(90deg);">
        </div>
        <div id="del" title="移到这里删除" style="background: url('img/del.png'); background-size:50px 50px;position: absolute; left:20px; top:500px; width: 50px; height:50px;"></div>
      </div>
  </body>
<script type="text/javascript">
  //删除的绝对位置
  var topDiv = $("#del").offset().top;    //距离上
  var leftDiv = $("#del").offset().left;    //距离左
  //移动div
  $(function(){
    //大div
    $('#dd1').draggable({
      proxy:'clone',
      revert:true,
      onStopDrag : function (event){
        var mathR = generateMixed(5);
        $("#all").append("<div id='d"+mathR+"' class='dd-demo1' style=\"background: url('img/bigDiv.png');;left:"+(event.clientX-40)+"px;top:"+(event.clientY-40)+"px;\" οndblclick=\"writeSth('"+mathR+"')\"><input type='hidden' id='"+mathR+"'><span></span><div>");
        $("#d"+mathR).draggable({
          onStopDrag : function (event){
            if(event.clientX > leftDiv && event.clientX < (leftDiv+50) && event.clientY > topDiv && event.clientY < (topDiv+50)){
              var msg = "您真的确定要删除吗？\n请确认！";
              if (!confirm(msg)){
                return;
              }else{
                $("#"+this.id).remove();
              }
            }
          }
        });
      }
    });
    //小div
    $('#dd2').draggable({
      proxy:'clone',
      revert:true,
      onStopDrag : function (event){
        var mathR = generateMixed(5);
        $("#all").append("<div id='d"+mathR+"' class='dd-demo2' style=\"background: url('img/smallDiv.png');;left:"+(event.clientX-40)+"px;top:"+(event.clientY-40)+"px;\" οndblclick=\"writeSth('"+mathR+"')\"><input type='hidden' id='"+mathR+"'><span></span><div>");
        $("#d"+mathR).draggable({
          onStopDrag : function (event){
            if(event.clientX > leftDiv && event.clientX < (leftDiv+50) && event.clientY > topDiv && event.clientY < (topDiv+50)){
              var msg = "您真的确定要删除吗？\n请确认！";
              if (!confirm(msg)){
                return;
              }else{
                $("#"+this.id).remove();
              }
            }
          }
        });
      }
    });
  });
  //移动箭头 
  //右
  $(function(){
    $('#right').draggable({
      proxy:'clone',
      revert:true,
      onStopDrag : function (event){
        var mathR = generateMixed(4);
        $("#all").append("<div id='r"+mathR+"' class='direction' style=\"background: url('img/right.png'); background-repeat: no-repeat;background-size: 50px 16px;left:"+(event.clientX-30)+"px;top:"+(event.clientY-6)+"px;\"><div>");
        $("#r"+mathR).draggable({
          onStopDrag : function (event){
            if(event.clientX > leftDiv && event.clientX < (leftDiv+50) && event.clientY > topDiv && event.clientY < (topDiv+50)){
              var msg = "您真的确定要删除吗？\n请确认！";
              if (!confirm(msg)){
                return;
              }else{
                $("#"+this.id).remove();
              }
            }
          }
        });
      }
    });
  });
  //左
  $(function(){
    $('#left').draggable({
      proxy:'clone',
      revert:true,
      onStopDrag : function (event){
        var mathR = generateMixed(4);
        $("#all").append("<div id='r"+mathR+"' class='direction' style=\"background: url('img/right.png'); background-repeat: no-repeat;background-size: 50px 16px;left:"+(event.clientX-30)+"px;top:"+(event.clientY-6)+"px; transform:rotate(180deg);\"><div>");
        $("#r"+mathR).draggable({
          onStopDrag : function (event){
            if(event.clientX > leftDiv && event.clientX < (leftDiv+50) && event.clientY > topDiv && event.clientY < (topDiv+50)){
              var msg = "您真的确定要删除吗？\n请确认！";
              if (!confirm(msg)){
                return;
              }else{
                $("#"+this.id).remove();
              }
            }
          }
        });
      }
    });
  });
  //上
  $(function(){
    $('#up').draggable({
      proxy:'clone',
      revert:true,
      onStopDrag : function (event){
        var mathR = generateMixed(4);
        $("#all").append("<div id='r"+mathR+"' class='direction' style=\"background: url('img/right.png'); background-repeat: no-repeat;background-size: 50px 16px;left:"+(event.clientX-30)+"px;top:"+(event.clientY-6)+"px; transform:rotate(-90deg);\"><div>");
        $("#r"+mathR).draggable({
          onStopDrag : function (event){
            if(event.clientX > leftDiv && event.clientX < (leftDiv+50) && event.clientY > topDiv && event.clientY < (topDiv+50)){
              var msg = "您真的确定要删除吗？\n请确认！";
              if (!confirm(msg)){
                return;
              }else{
                $("#"+this.id).remove();
              }
            }
          }
        });
      }
    });
  });
  //下
  $(function(){
    $('#down').draggable({
      proxy:'clone',
      revert:true,
      onStopDrag : function (event){
        var mathR = generateMixed(4);
        $("#all").append("<div id='r"+mathR+"' class='direction' style=\"background: url('img/right.png'); background-repeat: no-repeat;background-size: 50px 16px;left:"+(event.clientX-30)+"px;top:"+(event.clientY-6)+"px; transform:rotate(90deg);\"><div>");
        $("#r"+mathR).draggable({
          onStopDrag : function (event){
            if(event.clientX > leftDiv && event.clientX < (leftDiv+50) && event.clientY > topDiv && event.clientY < (topDiv+50)){
              var msg = "您真的确定要删除吗？\n请确认！";
              if (!confirm(msg)){
                return;
              }else{
                $("#"+this.id).remove();
              }
            }
          }
        });
      }
    });
  });
  
  function writeSth(ids){
    if($("#writeSth").is(":hidden")){
      $("#content").val($("#d"+ids+" span").text());
      $("#writeSth").show();
      $("#writeSth").attr("style","left:"+($('#d'+ids).offset().left+165)+"px; top:"+$('#d'+ids).offset().top+"px; position: absolute;");
      $("#content").attr("onkeyup","contentToDiv('"+ids+"')");
      //$("#content").val();
    }else{
      $("#writeSth").hide();
    }
  }
  
  //将input框的内容写到div上
  function contentToDiv(ids){
    $("#d"+ids+" span").html($("#content").val());
    $("#"+ids).val($("#content").val());
  }
  //获取随机数
  var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
  function generateMixed(n) {
       var res = "";
       for(var i = 0; i < n ; i ++) {
           var id = Math.ceil(Math.random()*35);
           res += chars[id];
       }
       return res;
  }
</script>
</html>
wangsaisoon
关注
专栏目录
layui 图片上传 支持删除、上传、拖拽、复制粘贴
qq_41515189的博客
07-23 1928
layui 上传图片 支持删除、上传、拖拽、复制粘贴
html的可移动的div
04-23
使用div+css+js实现层的可随意拖动
复制并拖拽Div
11-10
复制、拖拽、删除div，移动div，可以给div写内容，编辑div里面的内容
拖动div到另一个div中
10-17
拖动div,然后在另一个div显示被拖进div的id.
jquery拖拽小demo
神以灵的博客
06-18 506
一：知识点 e.pageX表示事件发生时，鼠标距离文档左边的距离 e.pageY表示事件发生时，鼠标距离文档上边的距离 二：代码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jq拖动插件简单小demo</title> <style type="text/css">
js实现拖拽功能(支持左右拖动、删除)
09-20
概述：实现拖拽工作流程配置，可以鼠标左右移动元素，鼠标双击可以删除元素。 基本原理：就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。
Js实现div移动
热门推荐
qq_33420835的博客
08-27 1万+
描述：点击按钮，div移动，并指定停止位置，（定时器） &lt;script&gt; window.onload=function () { var timer=null; var btn1=document.getElementById("btn1"); btn1.onclick=function () { ...
复制、删除并拖动div-附件资源
03-05
复制、删除并拖动div-附件资源
jquery拖动复制效果
06-01
描述中的“拖动div复制到表格”意味着用户可以通过鼠标拖动一个div元素，并在释放时将其复制到一个表格的特定位置。这涉及到HTML5的拖放API，jQuery UI库以及可能的自定义JavaScript代码来处理拖放事件和复制逻辑。 ...
js拖动、拖拽div大小,完美实现版
12-16
js拖动 拖拽div大小，内部随意文件操作。完美实现版
批量移动
yin_chenglong的博客
04-17 396
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-1.11.0.min.js"&amp
Android实现GridView的item长按拖动删除完美实现（带动画效果）
事情往往烟消云散
04-28 1万+
领导这几天让做一个项目，就是可以实现像支付宝首页一样的可以长按拖动，删除的界面，以前没做过，领导让我做的时候觉得简直是老虎吃天，无从下手啊，可是领导的任务还是要实现的，没办法，就自己网上找咯，但是网上的demo五花八门无法满足我的需求，而且bug还很多，所以最后就自己实现了，说实话，这个效果困扰了我好几个星期，因为其中牵扯的知识点太多了，什么事件分发机制，动画效果，互换位置的算法，还有拖动，这些我都
win10拖动方式设置-（移动、复制、创建快捷方式）
Ybox的博客
01-12 1万+
拖动操作共有三种响应模式，分别是：移动、复制、创建快捷方式。 在默认情况下，可以通过辅助按键来选择各响应模式： 1、拖动时按住shift键——移动同时删除原文 2、拖动时按住ctrl键——复制 3、拖动时按住alt键 或 同时按住ctrl和shift键——创建快捷方式 ...
Android GridView长按拖动，删除
jingzhiying的博客
04-12 2333
最近因为公司项目，需要用到两个GridView之间交互，一个GridView可以进行item的长按拖动，可拖动的item可以进行点击删除。本文主要介绍如何实现GridView的拖动和删除。可拖动的GridView源自网络，感谢提供者，本人对其代码进行优化和添加新功能，希望能对读者有所帮助。
js获取上传文件的大小
wangsaisoon的博客
06-14 7752
//reurl--上传文件的ID if(getFileSize("reurl") == -1){ layer.msg("文件错误",{time:2000}); return; }else if(getFileSize("reurl") == 0){ layer.msg("文件不能为空",{time:2000}); return; }else if(getFileSize("r
vue实现div内元素拖拽 元素互换位置
最新发布
05-20
要实现div内元素拖拽，可以使用vue-draggable插件。该插件提供了一个可拖拽的列表组件，支持拖拽排序、拖拽复制等功能。 下面是一个简单的示例： 1. 安装vue-draggable插件 ``` npm install vuedraggable --save ``` 2. 在组件中使用vuedraggable组件 ``` <template> <div> <draggable v-model="list"> <div v-for="item in list" :key="item.id">{{ item.name }}</div> </draggable> </div> </template> <script> import draggable from 'vuedraggable' export default { components: { draggable }, data() { return { list: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' } ] } } } </script> ``` 在上面的示例中，我们使用了vuedraggable组件，并将列表数据绑定到v-model中。列表中的每个元素都被包装在一个div中，并使用v-for指令进行渲染。 3. 实现元素互换位置 要实现元素互换位置，我们需要在vuedraggable组件上添加一个属性：`swap`。该属性指定一个函数，用于交换两个元素的位置。 ``` <template> <div> <draggable v-model="list" :swap="swap"> <div v-for="item in list" :key="item.id">{{ item.name }}</div> </draggable> </div> </template> <script> import draggable from 'vuedraggable' export default { components: { draggable }, data() { return { list: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' } ] } }, methods: { swap(event) { const draggedIndex = event.draggedContext.index const targetIndex = event.relatedContext.index const temp = this.list[draggedIndex] this.list.splice(draggedIndex, 1) this.list.splice(targetIndex, 0, temp) } } } </script> ``` 在上面的示例中，我们定义了一个名为`swap`的函数，该函数接收一个事件对象作为参数。事件对象包含拖拽的元素索引、目标元素索引等信息。我们可以根据这些信息来实现元素的互换位置。 具体实现中，我们首先获取被拖拽元素的索引`draggedIndex`和目标元素的索引`targetIndex`，然后使用数组的splice方法将被拖拽元素从列表中删除，并插入到目标元素的前面。 通过以上的步骤，我们就可以轻松地实现div内元素的拖拽和互换位置了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值