使用jQuery UI拖動Javascript元素

我有一個內部顯示圖形的<div>。有時候這張圖對於<div>來說太大了，所以我需要一種讓用戶用鼠標抓住圖形並移動它的方法。我發現了jQuery UI Draggable交互，並認爲這是我需要的。很容易讓基礎知識發揮作用，但是，我很難做到這一點。使用jQuery UI拖動Javascript元素

理想情況下，只能拖動圖表來揭示其他隱藏的部分。例如，如果在右側隱藏更多圖形，則可以將其拖到左側並查看該隱藏部分。但是，一旦右側的任何內容都可見，您就無法將其拖動到左側。我如何使用jQuery UI Draggable來實現這樣的事情？可能嗎？ jQuery UI是這個的正確工具嗎？

不是理想的，但仍然可以，即使圖形足夠小以適合父母<div>且無法隱藏，您可以將圖形拖動到任意位置。我甚至無法讓這個工作正確。會發生什麼情況是我可以選擇不指定containment選項。然後該圖不受限制。現在的問題是圖形的<div>只有一定的尺寸（父母的<div>的寬度和高度的100％）。節點放置在絕對定位之外。然後，當您拖動圖表來揭示這些隱藏的節點時，您不能再拖動該圖表......因爲您現在正在點擊圖表的<div>以外。

我可能有一個圖形容器<div>，我搞砸了事情的權利，並動態調整容器div作爲節點被添加或刪除..或者我可以實現這個沒有jQuery UI，只使用mousemove事件。什麼是最好的方法？還有另一個好的圖書館嗎？

來源

2011-04-18 at.

那麼，你想拖動你的圖形，就像地圖可以在Google地圖中拖動一樣嗎？這並不完全是jQueryUI的「可拖動」組件的意思 - 它意在重新定位整個DOM元素，而您想要做的是在「視口」中拖動顯示區域的位置。不知道你的圖表如何工作，我不能提供很多關於如何完成這一任務的建議。 – belugabob 2011-04-18 09:52:48

不是它的「意思」，但肯定是「可以做」的東西 – gnarf 2011-04-18 09:57:34

你說得對，@gnarf，並提供了一個解決方案，就像我正在研究的解決方案（我是jsfiddle的新手，所以好的一個@gnarf！ – belugabob 2011-04-18 10:27:52

我認爲這是你正在尋找的東西 - 你的容器應該是overflow:hidden，你的圖將被包含在一些寬度和高度的東西中，除此之外，你只需要計算一個「約束」框，這是將成爲容器的.offset()，通過計算「溢出」部分IE來添加「額外空間」只允許offset.left + container.innerWidth() - draggable.width()拖動的東西 - >offset.left

現在，如果這兩種約束上已經「適應」你需要確保「零」它的偏移量，如果他們都符合，跳過添加可拖動...把它放在一起，你會得到：

var contain = $("#container"), 
    big = $("#bigthing"), 
    offset = contain.offset(), 
    // calculate the "constraints" 
    constraints = [ 
     offset.left + contain.innerWidth() - big.width(), 
     offset.top + contain.innerHeight() - big.height(), 
     offset.left, 
     offset.top 
    ], 
    // it "fits" if our left/top constraint is higher or equal to the right/bottom 
    fitsX = constraints[0] >= constraints[2], 
    fitsY = constraints[1] >= constraints[3]; 


if (!(fitsX && fitsY)) { 
    if (fitsX) { 
     constraints[0] = constraints[2]; 
    } 
    if (fitsY) { 
     constraints[1] = constraints[3]; 
    } 
    big.draggable({ 
     containment: constraints 
    }); 
}

撥弄：http://jsfiddle.net/gnarf/jqy2b/1/

如果您需要動態調整可拖動的事情，只是重新計算遏制選擇！

來源

2011-04-18 09:56:42 gnarf

工作出色！偉大的工作gnarf，如果我能......我會記住你的答案兩次......遏制：約束選項沒有很好地記錄在jqueryui上現在，我看到這正是我所需要的。 – 2011-04-18 18:27:39

使用jQuery UI拖動Javascript元素

回答

相關問題