h5实现拖拽 

<!DOCTYPE html>
<html lang>
<head>
<meta charset="UTF-8">
<title>H5-tuozuai</title>
<link rel = "stylesheet" type="text/css" href="css/h5-02.css">
<script src = "js/jquery.js"></script>
</head>
<body>
<div class="test">
　　<ul>
　　　　<li>
　　　　　　<img src="01.jpg">
　　　　　　<p draggable = "true">回眸一笑百媚生
　　　　　　<br>￥<b>998</b></p>
　　　　</li>
　　　　<li>
　　　　　　<img src="02.jpg">
　　　　　　<p draggable = "true">枯藤老树昏鸦
　　　　　　<br>￥<b>50</b></p>
　　　　</li>
　　　　<li>
　　　　　　<img src="03.jpg">
　　　　　　<p draggable = "true">左牵黄，右擎苍
　　　　　　<br>￥<b>600</b></p>
　　　　</li>
　　　　</ul>
　　　　<div></div>

</div>

</body>
<script>

var lis = $("li");
var div2 = $(".test div")[0];
//设置DIV可接收
div2.ondragover = function(event){
　　event.preventDefault();
}
//把被拖动的元素进行循环，并进行setData
lis.each(function(index,val){
　　val.ondragstart = function(event){//拖拽刚开始时
　　event.dataTransfer.setData("key",$(val).text());//用key报存要被移动的数据
　　};
})
// 将被拖动元素放入DIV
div2.ondrop = function(){
　　var aa = event.dataTransfer.getData("key");
　　var bb = $("<p style='border-bottom:solid 1px #000'>"+aa+"</p>")
　　$(div2).append(bb);
}

</script>
</html>

 

拖拽前

 

                                                                            拖拽前

拖拽后：

                                                                             

 

posted @ 2017-01-13 16:28  十七楼  阅读(1405)  评论(0)  编辑  收藏  举报