我怎样才能让这个代码在移动设备上运行？ [关闭]

Question

我想在我的手机上运行此代码，但如果我尝试移动图片，它不会移动，也没有反应，我怎样才能让此代码在手机上运行

感谢 der122345

copy = 1;
$('.dragArea img').on('dragstart',function(e) {
	console.log('dragge it!',e);
	e.originalEvent.dataTransfer.setData("text",e.target.id);
}).on('dragend',function(e) {
	console.log('dragged',e);
});

$('.drop-field').on('dragover',function(e) {
	//console.log('dragover',e);
	e.preventDefault();
}).on('drop',function(e) {
	e.preventDefault();
	//window.status = 'successfully dragged';
	console.log('drop',e,window.status);
	data = e.originalEvent.dataTransfer.getData("text");
	$(this).append(copy ? $('#' + data).clone() : $('#' + data));
});

.drop-field {
	border: 4px #287CA1 dashed;
	display: inline-block;
	min-width: 50px;
	height: 50px;
}
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dragArea">
	<img src="http://lorempixel.com/image_output/city-q-g-640-480-4.jpg" width="50" height="50" alt="logo" id="logo" />
</div>
<div class="dropArea">
	<span class="drop-field"></span>
	<span class="drop-field"></span>
</div>

Answer 1

移动设备不支持原生拖放。您将需要求助于：

1. Touch API，使用touchmove 和touchend：

   el.addEventListener("touchstart", handleStart, false);
   el.addEventListener("touchend", handleEnd, false);
   el.addEventListener("touchcancel", handleCancel, false);
   el.addEventListener("touchmove", handleMove, false);
   

2. 只支持iOS的Drag and Drop shim。

3. 或jQuery UI Draggable 和Touch Punch。

这完全取决于您正在寻找哪种浏览器支持以及您愿意重写多少代码。