2016-10-30 4 views
0

現在jquery draggable関数https://jqueryui.com/draggable/を使用しています。jqueryのダブルクリックでドラッグイベントを停止する方法

$(".myclass").draggable({ }); 

しかし、ユーザーがドラッグ要素をダブルクリックすると、ドラッグイベントを停止したいと考えています。これを行う方法 ?。ワンクリックでドラッグを止めることは可能ですか?何らかの理由で私のドラッグ要素にマウスポインタが付いていて、ドラッグを止めることができません。

ありがとうございます。

+0

私は混乱しています。マウスの左ボタンを押したままドラッグします。マウスボタンを離すと要素がドラッグされなくなります??? –

+0

ちょっと説明してください。ダブルクリック/シングルクリックは、ドラッグ動作にどのように影響すると思われますか? – Viney

答えて

1

マウスを離すと、ドラッグが自動的に停止するはずです。

HTML

<body> 
<div id="draggable" class="ui-widget-content"> 
    <p>Drag me around</p> 
    <p id="position"></p> 
    <p id="event"></p> 
</div> 
</body> 

JS

$(function() { 
    $("#draggable").draggable({ 
     scroll: false, 
     drag: function(event, ui) { 
     $('#position').html(
      'Left : ' + ui.position.left + '<br/>' + 
      'Top : ' + ui.position.top 
     ); 
     }, 
     start: function(event, ui) { 
     $('#event').html("Dragging"); 
     }, 
     stop: function(event, ui) { 
     $('#event').html("Stopped"); 
     } 
    }); 
    }); 

上記のサンプルを試してみてください。 dragstopイベントは、マウスのドラッグを解除するたびに自動的に呼び出されます。あなたのコードでこれを適用して、なぜあなたのケースでドラグストップが呼び出されていないのかをさらに調べてみてください。

http://codepen.io/jyloo/pen/mrZmjO

+0

ok。私はこの答えに投票しました。しかし、友人はダブルクリックでドラッグを止める方法を教えてください。 –

+1

おそらくあなたはこれを試してみたいです: '$(document).dblclick(function(){ $(" .your-selector ").draggable(" disable "); $(" .your-selector ").draggable "enable"); }); ' – jyloo

+0

こんにちは、この質問をチェックしてください。http://stackoverflow.com/questions/40342500/jquery-draggable-event-changing-the-css-of-child-element –

関連する問題