我怎么能把这个代码放在移动设备上运行

how i can put this code running on mobile devicds?

本文关键字:移动 运行 怎么能 代码      更新时间:2023-09-26

我想在我的手机上运行这个代码,但如果我试图移动图片,它不会移动,也没有反应,我如何才能让这个代码在移动上运行

感谢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>

移动设备不支持本地拖放。您将需要求助于任一:

  1. 触摸API,使用touchmovetouchend:

    el.addEventListener("touchstart", handleStart, false);
    el.addEventListener("touchend", handleEnd, false);
    el.addEventListener("touchcancel", handleCancel, false);
    el.addEventListener("touchmove", handleMove, false);
    
  2. 仅支持iOS的拖放填充程序。

  3. 或者jQuery UI可通过Touch Punch拖动。

这实际上完全取决于你想要什么样的浏览器支持,以及你愿意重写多少代码。