穿梭框-内容可拖拽(超简单)

工作中有些需求需要用穿梭框,来拖拽东西进行分类。如下图
穿梭框-内容可拖拽(超简单)_第1张图片
穿梭框-内容可拖拽(超简单)_第2张图片
我们首先想到的可能就是mousedown mouseup 根据鼠标移动位置进行定位,但并不适用于我们的需求,想要达到效果可能需要写很多代码。
其实H5里提供了超简单的拖拽方法

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<style type="text/css">
#first {width:350px;height:350px;padding:10px;border:1px solid #aaaaaa;float: left;}
#second {width:350px;height:350px;padding:10px;border:1px solid #aaaaaa;float: left;}
</style>
</head>
<body>
<p>图片可以左右拖拽</p>

<div id="first" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="second" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag1" src="http://img.s.youfenba.com/material_thumb/BYX6Mm67ba.jpg" ondragstart="drag(event)" width="336" height="69">
    <img id="drag2" src="http://img.s.youfenba.com/material_thumb/8nzxJwpsPX.jpg" ondragstart="drag(event)" width="336" height="69">
    <img id="drag3" src="http://img.s.youfenba.com/material_thumb/SaNktASjmp.jpg" ondragstart="drag(event)" width="336" height="69">
</div>
</body>
<script>
    function allowDrop(e){
        e.preventDefault();
    }
    function drag(e){
        e.dataTransfer.setData("img",e.target.id);
    }
    function drop(e){
        e.preventDefault();
        var Img=e.dataTransfer.getData("img");
        e.target.appendChild(document.getElementById(Img));
    }
</script>
</html>

讲解:
H5里提供了三个方法,和一个属性。
1.首先将需要拖拽的标签设置 :draggable=“true” 的属性,表示可以拖拽。
2.需要拖拽的标签设置方法 :οndragstart=“fun( )” ,并使用 ==setData()==设置数据类型和值。
3.可接收拖拽的标签增加: οndragοver=“fun( )”,和 ==οndrοp=“fun( )”==进行放置操作。

参考了菜鸟教程html5

你可能感兴趣的:(实用功能,JS,H5)