html5拖動元素

2021-08-18 23:21:25 字數 775 閱讀 5015

/*將乙個元素拖動到另乙個元素上*/

步驟如下:

ondragstart 屬性呼叫了乙個 drag(event) 函式,規定拖動什麼資料

在drag(event)函式裡面:

/*設定被拖動資料的資料型別和值*/

/*資料型別是 "text",而值是這個可拖動元素的 id ("drag1")。*/

ev.datatransfer.setdata("text", ev.target.id);

這裡呼叫了datatransfer.setdata();傳入資料型別為text和值,ev.target目標的id;

ondragover 事件規定被拖動的資料能夠被放置到何處。

預設的資料或者元素是無法被放置到其他元素中,為了實現拖放,我們必須阻止元素的這種預設的處理方式;

這個任務由ondragover事件的event.preventdefault()方法完成;

上文 **中的

function allowdrop(ev)

當放開被拖資料時,會發生drop事件;

上面**中呼叫了drop(event)函式,同樣的,需要我們組織預設行為;

ev.preventdefault();// 預設drop事件的行為是以鏈結形式開啟的 

接著,我們通過datatransfer.getdata()獲取被拖動的資料,也就是被拖元素通過setdata()設定的資料。

var data = ev.datatransfer.getdata("text");

// 最後我們將被拖元素追加到放置元素中

html5實現元素的拖動和擺放

例項 拖動到矩形框中 執行效果 首先,為了使元素可拖動,把 draggable 屬性設定為 true 然後,規定當元素被拖動時,會發生什麼。在上面的例子中,ondragstart 屬性呼叫了乙個函式,drag event 它規定了被拖動的資料。datatransfer.setdata 方法設定被拖資...

HTML5移動端拖動慣性

下面 只是實現了上下滑動慣性,沒有寫水平滑動慣性。臨時 筆記,可能會在以後的過程中不斷更新優化 慣性原理 產生的速度 移動距離 移動時間 距離 鬆開的座標 上次的座標 距離差 時間 鬆開的時間 按下的時間 時間差 var dargfun false this.dargdom.addeventlist...

HTML5移動端拖動慣性

下面 只是實現了上下滑動慣性,沒有寫水平滑動慣性。臨時 筆記,可能會在以後的過程中不斷更新優化 慣性原理 產生的速度 移動距離 移動時間 距離 鬆開的座標 上次的座標 距離差 時間 鬆開的時間 按下的時間 時間差 var dargfun false this.dargdom.addeventlist...