jquery可拖拽下面具，用於多個元素

http://jsfiddle.net/QdbNe/1/jquery可拖拽下面具，用於多個元素

你可以檢查我試過的樣本。基本上，我需要能夠拖動半透明遮罩內的三個彩色方塊，具體取決於用戶點擊哪個方塊。但問題是我如何確定用戶點擊哪個孩子？因爲，點擊事件實際上發生在掩碼上，而不是孩子。

所以我需要做的是這樣

$("#mask").mousedown(function(e){ 
     var currentChild = //Somehow fetch the current child 
     currentChild.trigger(e); 
    });

任何想法？

來源

2012-12-11 Bluemagica

是否有透明面膜的原因？如果不是，下面可以工作：

$("#child1, #child2, #child3").draggable({ 
    stop:function(e,ui){ 
     alert(e.target.id); 
    } 
});

更新小提琴 http://jsfiddle.net/QdbNe/1/

來源

2012-12-11 08:10:39

不，我需要面具div在實踐中它應該有一個圖像....這只是一個結構的樣本。從邏輯上說，你的解決方案是行不通的，因爲我需要在拖動開始之前使用子標識符。而不是當它停止時 – Bluemagica

如果你必須在頂部有透明圖像然後在遮罩上點擊，你會得到匹配座標的方塊（使用jQuery的.position）。然後使用mask mousemove（）事件移動匹配的方塊。僅供參考，如果你需要在拖動開始ID使用拖動開始事件，請參閱更新的小提琴http://jsfiddle.net/QdbNe/1/ –

喬納森感謝嘗試，但： 1）我不能簡單地使用偏移量，我可以嗎？因爲我必須找到鼠標座標是否在div的範圍內，並且這需要相當多的資源來計算，特別是考慮到javascript的速度，並且事實上可能有相當多的子元素 2）我不知道是否你注意到了，但簡單地「運行」 - jsfiddle上的代碼不會更新它。確定更改後，您需要點擊「更新」按鈕。這將爲您提供更新版代碼的新鏈接。 – Bluemagica

對於我來說，喬納森的回答解決問題與

$("#mask").mousedown(function(e){ 
     $("#child1").trigger(e); 
    });

所以我的元素在視覺上部分地隱藏，但我可以移動它。

來源

2013-11-12 21:47:11

你錯過了這個問題的重點......「在一個單一掩碼下的多個可拖動元素」。假設你在'＃mask'下有'＃child1'，'＃child2'，'＃child3'，那麼如果你只是簡單地觸發它們，所有這些都會被拖拽在一起，即使用戶只徘徊在其中一個。 – Bluemagica

jquery可拖拽下面具，用於多個元素

回答

相關問題