2014-07-15 18 views
1

我使用简单的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> 

回答

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

所以标准拖拽元素将工作开箱即用,但其他元素,如divspan要求-webkit-user-drag属性附加。

例子:

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

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

+0

您好,感谢您的投入,我认为你是正确的但仍不能在x代码模拟器拖动。 – user3841443

+0

我开始相信我的代码是正确的,但是在iOS设置或其他方面存在错误。是否应该启用允许拖放操作? – user3841443