Question

我想在我的手机上运行此代码但是如果我试图移动图片它就不动了，我怎么能保持这些代码在移动设备上运行

谢谢der122345

＆＃13;

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));
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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);

仅支持iOS的Drag and Drop shim。
或jQuery UI Draggable与Touch Punch。

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

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

1 个答案: