jQuery UI的可拖動的表單元素

我有某種形式的元素的元素在裏面：jQuery UI的可拖動的表單元素

<div id="draggable"> 
    <button>Drag this</button> 
</div>

我把它拖動使用jQuery UI：

$('#draggable').draggable();

和表單元素佔據了大部分的可拖動元素中的空間：

#draggable { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #000; 
    background: #efe; 
    padding: 10px; 
} 
#draggable button { 
    width: 100px; 
    height: 100px; 
    line-height: 100px; 
    text-align: center; 
    background: rgba(0, 0, 0, .05); 
    border: none; 
}

我可以單擊div並將其拖動，但如果在內部單擊表單元素並嘗試拖動，沒有任何反應。試試看：http://jsfiddle.net/ACQrg/

我也嘗試過指定的'button'一個handle參數：

$('#draggable').draggable({ handle: 'button' });

不幸的是，這也不行。試試看：http://jsfiddle.net/ACQrg/1/

我也試圖通過對可拖動的元素，通過鼠標按下事件：

$('#draggable').draggable() 
    .find('button').mousedown(function (e) { 
     $('#draggable').trigger(e); 
    });

試試：http://jsfiddle.net/ACQrg/4/

有沒有一種方法，使可拖動的元素可拖動的他們包含的表單元素？

來源

2012-03-26 Joe Lencioni

我有一個類似的問題，我所做的是在窗體元素的「頂部」添加另一個div並將其用作句柄。 – 2012-03-26 18:14:23

@CharlesOvando是可點擊的表單元素嗎？ – 2012-03-26 18:23:36

對此問題的任何更新？ – diosney 2013-08-03 17:56:31

這可能會發生，因爲該按鈕捕捉點擊事件，而不是冒泡他們。嘗試使用不同的內部元素，例如：http://jsfiddle.net/ACQrg/3/

來源

2012-03-26 18:15:03

感謝您的回覆。我知道這是因爲我正在使用一個表單元素，我想解決這個問題，而不會將我的表單元素更改爲不同的類型。 – 2012-03-26 18:19:23

這就是我的意思：http://jsfiddle.net/givius/ACQrg/6/ – 2012-03-27 19:43:39

這可能類似於Tsachi的答案，但我最終做的是創建我的原始容器div，其中包含兩個div，一個用於我的輸入框，一個用於我的按鈕。這很好地拖動。然後，當用戶使用我的系統時，我不在編輯器中，因此當他們單擊對象時，我使用jquery將輸入框和按鈕代碼替換爲div。（我要求用戶輸入自己的電子郵件，並點擊提交）

所以它看起來像這樣在我的編輯模式：

<div id="holder"> 
    <div class="inputelem">Enter Email</div> 
    <div class="buttonelem">Submit</div> 
</div>

然後，根據需要拖動。在運行時，我這樣做：

$('#holder').html('<input class="inputelem" type="text" name="email"><input class="buttonelem" type="submit" value="submit">');

唯一的技巧就是確保這個類定義爲inputelem和buttonelem看起來一樣在一個div上，因爲他們的表單元素上做的。一種痛苦，但它的作品。

來源

2013-11-05 07:12:53

jQuery UI的可拖動的表單元素

回答

相關問題