jQuery UI可拖動和文本選擇

我正在使用jQuery 1.8.3和jQuery UI 1.9.2。
我的web應用程序有一些可拖動的元素，我想讓用戶在包含的元素中選擇一些文本。
我見過關於這個話題的其他一些問題。
我正在使用的另一個路徑是使用鼠標右鍵單擊並使用我找到的一些文本選擇插件。我仍然無法使它工作。jQuery UI可拖動和文本選擇

似乎可拖動/可排序的元素不允許文本選擇或可以攔截鼠標（點擊）事件。

任何想法？

問候。

來源

2012-11-28 LeftyX

你可以把你的文本包裝在一個div標籤中，然後設置該div的jquery .click函數來阻止默認（移除拖動事件）這種方式div將只包圍文本，所以當用戶單擊該div時，可拖動事件已移除？只是在黑暗中拍攝。 – Tom

我相信你的方法是正確的，你可以使用右鍵單擊從某些div複製文本。

E.g.搭配：

<script src="http://cachedcommons.org/cache/zero-clipboard/1.0.7/javascripts/zero-clipboard-min.js" type="text/javascript"></script> 
<div id="dragme" class="temp">Draggable Text</div>

以及包括jQuery的用戶界面，下面的JavaScript應允許您使用左鍵點擊拖放一個div，並用鼠標右鍵單擊該專區內複製文本：

$("#dragme").draggable(); 

$.event.special.rightclick = { 
    bindType: "contextmenu", 
    delegateType: "contextmenu" 
}; 

ZeroClipboard.setMoviePath('http://zeroclipboard.googlecode.com/svn/trunk/ZeroClipboard10.swf'); 
//Create a new clipboard client 
var clip = new ZeroClipboard.Client(); 

$(document).on("rightclick", ".ui-draggable", function() { 

     //Grab the text from the parent row of the icon 
     var txt = $(this).text(); 
     alert("Copying text: "+txt); 
     clip.setText(txt); 
     clip.glue(this); 

     //Add a complete event to let the user know the text was copied 
     clip.addEventListener('complete', function(client, text) { 
      alert("Copied text to clipboard:\n" + text); 
     }); 
     clip.hide(); 
     return false; 
});

我有一個jsfiddle這個，但我認爲與ZeroClipboard的SWF副本不同意jsfiddle。
但它應該在你的開發環境中工作。

來源

2012-11-28 23:01:39 mccannf

謝謝。這是一個很好的解決方案。 – LeftyX

使用鼠標事件爲子元素選擇文本，從父元素中移除可拖動的類。然後使用mouseleave爲子元素重新添加父元素上的可拖動類。

來源

2016-09-06 04:30:03 nshidbaby

jQuery UI可拖動和文本選擇

回答

相關問題