Question

我需要一些帮助。我如何在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>

Answer 1

由于drag - 事件仅在元素实际移动时才被调用在mouseup上：检查是否调用了可拖动的drag事件，如果没有，请执行单击操作。

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

Answer 2

您可以尝试附加touchstart和touchend事件，并测量开始和结束之间的时间，以检查它是否是“点击”或者是否“拖动”。然后，如果它是一个水龙头你可以打开图像。如果它长于500毫秒，它们显然是拖动图像，这样你就可以从那里拖动图像。

可拖动并可同时点击

2 个答案: