HTML5 元素拖拽实现及 jquery.event.drag插件

最新推荐文章于 2022-04-30 03:52:21 发布

weixin_34392906

最新推荐文章于 2022-04-30 03:52:21 发布

阅读量622

点赞数

文章标签： javascript webpack ViewUI

如上图片：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>可拖拽的元素组件</title>
    <style>
        #d1 {width:800px; height:100px; border:1px solid #ddd; background:#eee; margin:5px;}
        #d2 {width:800px; height:100px; border:1px solid #ddd; background:#eee; margin:5px;}
        
    </style>
</head>
<body>
    <div id="d1">
      <img id="myimg" src="https://www.baidu.com/img/baidu_jgylogo3.gif" />
    </div>
 
   <div id="d2"></div>
   
   <script>
   
   //获取图片及两个div元素
    var d1 = document.getElementById("d1"),
        myimg = document.getElementById("myimg"),
        d2 = document.getElementById("d2");

    //给图片绑定dragstart事件
    myimg.addEventListener("dragstart",MyDragStart);
    
    //给第二个div绑定dragover,drop两个事件
    d2.addEventListener("dragover",MyDragover);
    d2.addEventListener("drop",MyDrop);

    //给第一个div绑定dragover,drop两个事件
    d1.addEventListener("dragover",MyDragover);
    d1.addEventListener("drop",MyDrop);

    //图片开始拖拽事件的处理函数
    function MyDragStart(event){
        var mydata = myimg.id;//保存ID值
        var trans = event.dataTransfer;
        trans.setData("text",mydata);
    }

    //该处理函数是为阻止页面的默认行为
    function MyDragover(){
        event.preventDefault();
    }

    //drop处理函数
    function MyDrop(event){
        //
        var trans = event.dataTransfer;//获取数据保存对象
        var mysrc = trans.getData("text");//图片id
        var ele = document.getElementById(mysrc);//获取到图片对象
        if (ele != event.srcElement)//判断图片是否移动
        {
            event.srcElement.appendChild(ele.parentNode.removeChild(ele));//将img元素剪切到目标div中
        }

        trans.clearData("text");//清除数据
    }
    </script>
</body>
</html>

View Code

W3CSHOOL:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:198px; height:66px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)">
  <img src="/i/eg_dragdrop_w3school.gif" draggable="true" οndragstart="drag(event)" id="drag1" />
</div>
<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>

</body>
</html>

View Code

H5 JQUERY：

<!DOCTYPE html>
<html lang>
<head>
<meta charset="UTF-8">
<title>H5-tuozuai</title>

<script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.dd {}
.dd li{display:inline-block; padding:5px; margin:5px; border:1px solid red; text-align:center; cursor:move;}
.dd li img {display:block;}

.dd_over li {min-height:200px; margin:15px; border:1px dashed #ddd;}
</style>
</head>
<body>

    <ul class="dd">
        <li><img src="https://www.baidu.com/img/baidu_jgylogo3.gif">abc</li>
        <li><img src="https://www.baidu.com/img/baidu_jgylogo3.gif">123</li>
        <li><img src="https://www.baidu.com/img/baidu_jgylogo3.gif">678</li>
    </ul>
    <ul class="dd_over">
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <script>

        var dd = $(".dd li");
        var dd_over = $(".dd_over li");
        
        //把被拖动的元素进行循环，并进行setData
        dd.each(function(index,val){
        　　val.ondragstart = function(event){//拖拽刚开始时
        　　        event.dataTransfer.setData("key", $(val).html());//用key作为被移动的数据
              console.log("start begin");
          };
        });
        
        //设置DIV可接收
        dd_over.each(function(index,val){
            val.ondragover = function(event){
                event.preventDefault();
                console.log("o");
            };
        });
        
        // 将被拖动元素放入DIV
        dd_over.each(function(index,val){
            val.ondrop = function(event){
                var key = event.dataTransfer.getData("key");
                var html = $("<span style='border:solid 1px #f60; padding:5px; margin:5px;'>"+key+"</span>")
                //var html = $("<span style='border:solid 1px #f60; padding:5px; margin:5px;'>aa</span>")
                $(this).append(html);
                console.log("stop" + index);
            };
        });

    </script>
</body>
</html>

View Code

demo如图：

http://www.cnblogs.com/Medeor/p/4963321.html

拖拽插件的话，如下：jquery.event.drag

http://threedubmedia.com/code/event/drop#demos

weixin_34392906

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 元素拖拽实现及 jquery.event.drag插件

如上图片：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt; &lt;title&gt;可拖拽的元素组件&lt;/title&gt;
复制链接

扫一扫