Question

我想在移动设备上使用此拖放功能，但是当我在手机上运行它时，它无法正常工作。

以下是代码：

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

可能是因为拖放功能使用了mousedown和mouseup，它们不符合移动设备。

以下是一个链接主题：How to get jquery dragging working on mobile devices?其中建议的解决方案是使用jQuery UI Touch Punch（将点击事件转换为触摸事件）。

为什么此代码无法在移动设备上运行？

1 个答案: