Question

我使用简单的HTML代码来处理拖放功能，作为我的IOS应用程序的一部分。这段代码在浏览器中完美运行，但是当我将其复制到我的xcode文件中时，图像不会被拖动。

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
        </style>
    <script>
        function allowDrop(ev)
        {
            ev.preventDefault();
        }

    function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    }

    function drop(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    </script>
</head>
<body>

    <p>Drag the image into the rectangle:</p>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img id="drag1" src="images/face.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Answer 1

阅读Apple的webview功能文档说明你必须设置一个CSS属性才能工作。

来自文档：

Making an Element Draggable

WebKit provides automatic support to let users drag common items, such as images, links
and selected text. You can extend this support to include specific elements on an HTML
page. For example, you could mark a particular div or span tag as draggable.

To mark an arbitrary element as draggable, add the -webkit-user-drag attribute
(previously -khtml-user-drag) to the style definition of the element. Because it is a
cascading style sheet (CSS) attribute, you can include it as part of a style definition
or as an inline style attribute on the element tag. The values for this attribute are
listed in Table 1.

因此，标准可拖动功能可以直接使用，但div或span等其他元素需要附加-webkit-user-drag属性。

示例：

#drag1 { -webkit-user-drag: element; }

来源：https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html

Answer 2

This code is what worked in the end.

<script>


var nodeList = document.getElementsByClassName('contents');

for(var i=0;i<nodeList.length;i++) {
    var obj = nodeList[i];
    obj.addEventListener('touchmove', function(event) {
                         var touch = event.targetTouches[0];

                         // Place element where the finger is
                         event.target.style.left = touch.pageX + 'px';
                         event.target.style.top = touch.pageY + 'px';
                         event.preventDefault();

         });


}
</script>

在安装的phonegap中使用拖放功能

2 个答案: