CODEWITHSUNDEEP
javascripthtmljquery-ui
user3466043
user3466043

Reputation: 1

Draggable and clickable at same time

I need some help please. How do I make this work on an ipad. It needs to allow me to drag a group of images around that are each linked to a separate file when clicked. Right now the dragging is working but the image links are not. Now, if a comment out the initTouch();, then the image links will work. I would like to get the links and the dragging to work together.

example:

<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" });

// these two lines of code are currently not working unless I delete first line after word function//

    $( "#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>

Upvotes: 0

Views: 970

Answers (2)

Andreas Storvik Strauman
Andreas Storvik Strauman

Reputation: 1655

Since the drag-event only gets called if the element actually gets moved.
On mouseup: check if the draggable drag event was invoked, and if not, do click action.

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

Upvotes: 1

Mal1t1a
Mal1t1a

Reputation: 1

You could try to attach touchstart and touchend events, and measure the time between start and end to check if it's a "tap" or if they are "dragging". Then if it's a tap you could just open the image. If it's longer than say, 500ms they are obviously dragging the image so you would make the image draggable from there.

Upvotes: 0

Related Questions