1

我正在尝试制作一个功能，让用户在文本框中输入内容，在您输入内容时生成建议（如 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 文件中使用相同的代码时，拖放在移动设备上不起作用（但在台式机上起作用）。

4

1 回答 1

1

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

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

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

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

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

于 2012-09-03T08:34:00.553 回答