用 Jquery 的UI DRAG元件實現拖動功能

2021-04-20 10:00:18 字數 806 閱讀 5968

'最近要實現一下facebook中的photo tag功能,並對其進行擴充套件,在實現拖動功能時採用了$.event.special.drag 發現在實現被拖動的層不能超出固定的大小很是麻煩,不過實現了,趁放假考慮一下其它的方法,發現mootools框架中的拖動可以很容易的實現,不太相信jquery實現了,只是懷疑自己沒有找到而已,後來想到了ui元件,在進行一番的文件檢視後發現了ui.droppable.js這個檔案。

經過研究寫了乙個小的demo,哈。假期後準備再改造一下

"-//w3c//dtd html 4.0 transitional//en">

'outer' style="width: 500px;height: 500px;background:#eee">

'inter' style="width: 100px;height: 100px;background:#ccc">

其中containment後面對應的是乙個dom對像,如果直接用

containment: 'outer'這樣是行不通的,開始沒有在意直接寫成了

containment:'outer'結果無效果,最後試試

containment:$('#outer') 可行、看來不系統的學習還是要走不少彎路的

不過最終還是有些問題,

如果在outer外面再加乙個層

"width: 500px;height: 200px;">

這樣還是有問題,看來還是要計算一下outer層的top,left這個座標值

應該和 droppable options 中的axis有關系統,明天再研究一下看看

axis:'100,100'

用 Jquery 的UI DRAG元件實現拖動功能

最近要實現一下facebook中的photo tag功能,並對其進行擴充套件,在實現拖動功能時採用了 event.special.drag 發現在實現被拖動的層不能超出固定的大小很是麻煩,不過實現了,趁放假考慮一下其它的方法,發現mootools框架中的拖動可以很容易的實現,不太相信jquery實現...

jquery運算元組

sort 是陣列操作的乙個方法,之前簡單的說過一下,並沒有看重,今天用到了就詳細的說一下。先看下面的使用方法 1 arrayobj.sort function arrayobj為目標陣列,function為sort 方法執行的函式,如果不寫這個引數,那麼元素將按照 ascii 字元順序進行公升序排列...

jquery運算元組的方法

為了更加方便地運算元組,jquery 為我們提供了 5 種方法,如表 1 所示。表 1 jquery 運算元組的方法 方法說明 inarray 判斷元素 merge 合併陣列 makearray 轉換陣列 grep 過濾陣列 each 遍歷陣列 本節教程先來介紹第一種 inarray 判斷元素 合併...