一、效果图
二、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽事件</title>
<style type="text/css">
div{
width:400px;
height:300px;
border:1px solid black;
}
</style>
<script src="js/jquery-3.4.0.min.js" type="text/javascript">
</script>
</head>
<body>
<div id="box1">
<img id='img' src="img/JG1.jpg"/ width='200' draggable="true">
</div>
<div id="box2">
</div>
<script type="text/javascript">
$(document).ready(function(){
var $box1=$('#box1')
var $box2=$('#box2')
var $img=$('img')
//给我们要拖动的图片绑定dragstart事件，把图片的id保存在dataTransfer里面。
//这里要注意，原生js的dataTransfer就是event的属性，而jQuery的dataTransfer在originalEvent里面
$img.bind('dragstart',function(e){
var data=e.originalEvent.dataTransfer
data.setData('text/plain',$(this).attr('id'))
})
//给box2添加dragover事件，取消默认行为，允许往上拖图片。
//preventDefault也在originalEvent里面。
$box2.bind('dragover',function(e){
e.originalEvent.preventDefault()
})
//给box2添加drop事件，从dataTransfer里面取出图片的id。
//往box2插入图片的时候要注意，我们是会用id来获取节点，而id本身是不带#号的，#需要自己拼接上。
$box2.bind('drop',function(e){
var text=e.originalEvent.dataTransfer.getData('text/plain')
$(this).append($('#'+text))
})
//下面对box1的操作跟box2一样，这样就能再把图片拖回去
$box1.bind('dragover',function(e){
e.originalEvent.preventDefault()
})
$box1.bind('drop',function(e){
var text=e.originalEvent.dataTransfer.getData('text/plain')
$(this).append($('#'+text))
})
})
</script>
</body>
</html>
715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
