请告诉我如何是拖砖图片y轴下移？

<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
		<title>使用拖拽更改支付宝的默认付款方式</title>
		<style type="text/css">
			/*此处写代码*/
			*{
			    margin:0;
			    padding:0;
			}
			ul{
			    list-style:none;
			    margin-top:10px;
			    margin-left:10px;
			    width:200px;
			}
			li{
			    border:1px dashed #999;
			    padding:2px 0;
			}
			img{
			    display:none;
			}
		</style>
	</head>
	<body>
		<h3>使用拖拽更改支付宝的默认付款方式</h3>
		<ul id="card">
			<li draggable='true'>招商信用卡</li>			
			<li draggable='true'>交通信用卡</li>			
			<li draggable='true'>中信储蓄卡</li>			
			<li draggable='true'>建行储蓄卡</li>			
			<li draggable='true'>蚂蚁花呗</li>			
			<li draggable='true'>余额宝</li>			
			<li draggable='true'>余额</li>			
		</ul>
	    <img id='img' src='http://img1.sycdn.imooc.com/climg//59705a7b0001736902000080.png'>
		<script src='https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js'></script>
		<script>
			// 此处写代码
			(function(){
			    var dragSrc
			    $('li').each(function(i,ele){
			        $(ele).on('dragstart',function(e){
			            dragSrc=$(this)
			            e.originalEvent.dataTransfer.setData('text/html',$(this).html())
			            e.originalEvent.dataTransfer.setDragImage($('#img').clone().removeClass('hide')[0],70,0)
			        }).on('dragover',function(e){
			            e.preventDefault()
			        }).on('drop',function(e){
			            if(dragSrc!=$(this)){
			                dragSrc.html($(this).html())
			                $(this).html(e.originalEvent.dataTransfer.getData('text/html'))
			            }
			        })
			    })
			    
			})(jQuery)
		</script>
	</body>
</html>

e.originalEvent.dataTransfer.setDragImage($('#img').clone().removeClass('hide')[0],70,0)
最后的0是指y轴偏移吧？为啥设来设去没变化呢。

慕神7088389 2018-07-08

源自：HTML5拖拽上传 5-2 编程练习

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2018-07-09 17:26:02

1、最后两个参数都是0的时候，e.originalEvent.dataTransfer.setDragImage($('#img').clone().removeClass('hide')[0],0,0)

粉色代表的是鼠标箭头的位置

2、最后一个参数是100的时候：

e.originalEvent.dataTransfer.setDragImage($('#img').clone().removeClass('hide')[0],0,100)

粉色是箭头的位置，黄色框是第三个参数为0的时候的位置。

自己可以再用Chrome浏览器测试下。

收起回答

慕神7088389 提问者 #1

我发现一个问题，y轴为负数，比如-100时，在鼠标拖动的一瞬间，图片完成了一个从y轴-100到0的动画，也就是说y轴一瞬间归0了。但正数就不会这样。测试在OSX最新版chrome上。

2018-07-09 19:39:49
好帮手慕星星回复提问者慕神7088389 #2

经用OSX最新版chrome上测试，确实存在这种问题，可能和操作系统有关系，在Windows系统上是没有问题的。

2018-07-10 10:27:03

好帮手慕星星 2018-07-09 11:24:36

效果实现的是没有问题的哦，e.originalEvent.dataTransfer.setDragImage($('#img').clone().removeClass('hide')[0],70,0)，后面的两个参数，倒数第二个参数是x轴上的移动，倒数第一个参数是y轴上面的移动，可以观察拖拽图片距离鼠标的位置，自己测试下，祝学习愉快~~

收起回答