wex5 實現拖拽元素

現在很多地方都會用到拖拽和拖拽替換的功能，我做的乙個專案裡面就需要對元素進行拖拽替換。現在暫時只實現了拖拽，拖拽替換的會後續補上。

看了示例裡面的touchjs，只有乙個元素的拖動，而且**比較複雜，要改的話，難度會比較大。所以先自己寫了乙個多元素拖動的**。相容pc和手機

前台頁面處理：

我資料庫用的是data，在model中新增data資料庫

，包含id，的連線和點選跳轉的連線，字段編輯完之後，填充資料：

將資料與元件進行繫結：

注意：這裡呼叫的是專案中img資料夾下shortimg資料夾裡的，資料庫中存的只是的名稱，如果直接與元件繫結，是出不來的，所以需要新增乙個方法，把路徑補全，並且對路徑進行轉換

到現在為止，資料的展示部分已經完成，接下來需要進行元素的拖拽部分：

元素拖拽部分：

js實現的原理：

1、滑鼠按下/手指觸屏 --> mousedown/touchstart

2、拖動 --> mousemove/touchmove

3、滑鼠鬆開/手指鬆開 --> mouseup/touchend

4、通過定位position:absolute對元素進行定位實現拖動效果

與wex5元件結合實現拖拽：

1、在model的onload事件中獲取資料元件並遍歷

2、獲取資料元件：this.comp("listitems").$domnode。//listitems為元件的xid

3、獲取資料元件中的元素：資料元件.context.children

心得：瀏覽器自帶的除錯工具可以給我們很多幫助，比如元件的結構或者元件的屬性值。可以直接在js檔案中手動斷點除錯：debugger；

**如下：

model.prototype.modelload = function

(event)
for(var i=0;i
};

//

定義touchevents物件，包含手指觸屏，移動，結束動作
model.prototype.touchevents =}}
function
getcss(o,key)
//定義touch事件
model.prototype.touch = function
(event);
var minzindex = 1;
var obj =event.currenttarget;
switch
(event.type)
}

執行效果：

拖動效果：

WeX5 單頁應用

例子參考ui2 portal sample index.w 要點 關於url 從 來看，x5中有兩種url格式，一種是內部的相對url，一種是標準的絕對url，如果使用x5提供的方法，兩種url都可以，如果要使用標準的html語法，需要轉成絕對的。相對url是ui2目錄下的路徑，在 中有兩種寫法 相...

WEX5 學習筆記（六）

靜態資料格式的資料 一般用 data 資料元件。而且data資料元件裡設定的列要跟 json靜態資料裡的列相同。data元件在重新整理資料的時候 有個事件 oncustomrefresh 接管重新整理事件會被觸發 所以我們在這裡將載入 的json資料載入到data當中就行。只要data的屬性 aut...

Wex5各元件介紹

1 2 select 元件 3 頁面互動以及傳遞引數 包含父子雙向頁面之間資料傳遞方法介紹 內嵌頁面向父頁面返回資料 在內嵌頁面中，呼叫this.owner.send data 方法，可以向父頁面返回資料，此時會觸發父頁面中對應windowcontainer元件的onreceive事件，我們可以在此...