Question

我正在尝试创建一个功能，用户可以在文本框中键入内容，在您键入时生成建议（如Google Instant），然后可以将这些建议拖到页面上的框中。一切正常，直到我发现触摸屏移动设备无法使用HTML 5拖放。我试图让它与jquery一起工作，但它并不顺利。

下面的代码显示了一个可拖动的图像，它适用于触摸屏和鼠标。

<script type='text/javascript' src='js/head.min.js'></script>
        <link rel='stylesheet' type='text/css' href='css/style.css' />
<script>
head.js('https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js','js/ui.js','js/touch.js', function (){
   $('#touchme1').draggable({revert:true});
$('#drop').droppable({
    drop: function( event, ui ) {
        $(ui.draggable).remove();
        $(this).css({'border':'#777 dashed 3px','background':'#eee'});
    },
    over: function(event, ui) {
        $(this).css({'border':'#a33 dashed 3px','background':'#faa'});
    },
    out: function (event, ui){
        $(this).css({'border':'#777 dashed 3px','background':'#eee'});
    }
});
});
</script>
<img src='itemimages/75.jpg' id='touchme1' class='touchBox'>

问题是，当在调用显示搜索结果的php文件中使用相同的代码时，拖放在移动设备上不起作用（但在桌面上也是如此）。

Answer 1

我有一种感觉，您可能需要将事件处理程序附加到＃touch1元素。您发布的代码只查找DOM中已存在的＃touch1元素，但是当您的元素通过AJAX加载时，它会在页面首次加载时不在DOM中。

您可以使用.on()将事件处理程序附加到对象。

$(document).on('mouseover', '#touchme1', function(){
    $(this).draggable({revert:true});
});

在上面的示例中，我使用的是mouseover事件。但是，您需要选择一个适用于触摸设备和鼠标的事件处理程序。

示例jsbin：http://jsbin.com/agisom/2/edit

拖放Javascript在移动设备上的ajax请求中不起作用

1 个答案: