javascript - 可同时拖动和点击

标签 javascript html jquery-ui

我需要一些帮助。 我如何在 ipad 上实现此功能。它需要允许我拖动一组图像,每个图像在单击时都链接到一个单独的文件。现在拖动可以正常工作,但图像链接却不能。现在,如果注释掉 initTouch();,则图像链接将起作用。 我想让链接和拖动一起工作。

示例:

<head>

<link rel="stylesheet" href="Page2.css" />
<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.draggable.js"></script>

<meta charset="utf-8">

<script>
$(function() {
    $(document).ready(function (){initTouch(); });
    $( "#draggable" ).draggable({ handle: "p.ui-widget-header" });
    $( "#draggable" ).draggable({ cursor: "crosshair" });
    $( "#draggable" ).draggable({ containment: "none" }); 

//这两行代码目前不起作用,除非我删除单词函数后的第一行//

    $( "#image2" ).wrap('<a href="RateCard.html" target="_blank"></a>');
    $( "#image3" ).wrap('<a href="RateCard2.html" target="_blank"></a>');

});

</script> 



</head>
<body>

<div id="primaryContainer" class="primaryContainer clearfix">
    <div id="box" class="clearfix">
    </div>
    <div id="box1" class="clearfix">
    </div>
    <p id="text">
    <span id="effect">Commercial</span><br />
    </p>

<div id="wood" class="clearfix">




    <div id="draggable" class="ui-widget-content">

        <p class="ui-widget-header"><img id="image" src="img/film1_01.png" class="image" /></p>
        <img id="image1" src="img/film1_02.png" class="image" />
        <img id="image2" src="img/film1_03.png" class="image" />
        <img id="image3" src="img/film1_04.png" class="image" />
        <img id="image4" src="img/film1_05.png" class="image" />
        <img id="image5" src="img/film1_06.png" class="image" />
        <img id="image6" src="img/film1_07.png" class="image" />
    </div></div>
    <p id="text1">
    <span id="textspan1">Drag a film strip and select the video you want to see.</span><br />
    </p>
</div>



</body>

最佳答案

因为只有当元素实际移动时才会调用 drag 事件。
mouseup 上:检查是否调用了可拖动 drag 事件,如果没有,则执行单击操作。

var dragInvoked=false;
$( "#draggable" ).draggable({
    drag:function(){
        dragInvoked= true;
    }
});
$("#draggable").mouseup(function(){
    if (!wasMoved){
        doClickAction();
    }
    wasMoved=false;
});

关于javascript - 可同时拖动和点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23348398/

相关文章:

javascript - JS bind 是获取 obj 的状态还是保留对 obj 的引用?

html - 插入制表符空格以在 HTML/CSS 中垂直对齐文本

jquery - Google map (API v2)+ jQuery UI 对话框,不可停止的拖动问题

javascript - 预验证 Hook 中的 Mongoose 无效不会引发错误

javascript - 在同一 html 页面上将数据从一个元素传递到另一个元素

javascript - addEventListener 不能附加到哪些 html 元素?

javascript - 为什么这个对话框的内容表现得如此奇怪?

javascript - 当我单击浏览器后退按钮或移动设备后退按钮时,保留所选选项卡

javascript - 如何在 Chrome/Safari 中调试 EJS 代码

javascript - 在 HTML canvas 上绘制的视频只能在 chrome 中播放,即使使用 webm