HTML5的Drag and Drop是很不錯的功能，網(wǎng)上使用例子較多如?http://html5demos.com/drag?，但這些例子大部分沒實(shí)際用途，本文將搞個(gè)有點(diǎn)使用價(jià)值的例子，通過Drag and Drop生成圖片的Base64的字符串信息。

使用Base64方式的圖片有諸多好處，可將多個(gè)圖片信息整合到單個(gè)js文件避免多次http請求，可以避免WebGL例子跨域訪問的安全限制無法本地文件運(yùn)行等好處，當(dāng)然弊端也不少例如不能有效利用瀏覽器圖片緩存機(jī)制等。使用HT for Web的朋友會發(fā)現(xiàn)HT的例子很多注冊圖片都采用Base64的方式，這主要是為了方便用戶直接本地文件打開HT的手冊即可操作瀏覽，無需構(gòu)建web服務(wù)器發(fā)布進(jìn)行訪問，用戶常問然后將圖片轉(zhuǎn)出Base64信息，我們使用的就是本文介紹的小工具。

該工具由一個(gè)列表、一個(gè)拓?fù)鋱D和一個(gè)文本框三部分組成，用戶任意拖拽本地多圖片文件到任意頁面部分，HT自動將圖片信息生成對應(yīng)的DataModel數(shù)據(jù)模型，列表顯示圖片效果、名稱和寬高信息，拓?fù)滹@示圖片、修改時(shí)間和文件大小等信息，文本框生成對應(yīng)注冊到htDefault.setImage函數(shù)的代碼片段，用戶直接可以將文本框內(nèi)的代碼拷貝到自己的工程的js文件進(jìn)行使用。

function init(){

dataModel = new ht.DataModel();

listView = new ht.widget.ListView(dataModel);

graphView = new ht.graph.GraphView(dataModel);

splitView = new ht.widget.SplitView(listView, graphView);

textArea = new ht.widget.TextArea();

textArea.getElement().style.wordWrap = 'normal';

textArea.getElement().style.color = '#777';

textArea.setEditable(false);

new ht.widget.SplitView(splitView, textArea, 'v').addToDOM();

new ht.layout.ForceLayout(graphView).start();

listView.setRowHeight(50);

listView.drawRowBackground = function(g, data, selected, x, y, width, height){

if(this.isSelected(data)){

g.fillStyle = '#87A6CB';

}

else if(this.getRowIndex(data) % 2 === 0){

g.fillStyle = '#F1F4F7';

}

else{

g.fillStyle = '#FAFAFA';

}

g.beginPath();

g.rect(x, y, width, height);

g.fill();

};

ht.Default.setImage('icon', {

width: 50,

height: 50,

clip: function(g, width, height) {

g.beginPath();

g.arc(width/2, height/2, Math.min(width, height)/2-3, 0, Math.PI * 2, true);

g.clip();

},

comps: [

{

type: 'image',

stretch: 'uniform',

rect: [0, 0, 50, 50],

name: {func: 'getImage'}

}

]

});

listView.setIndent(60);

listView.setVisibleFunc(function(data){

return data instanceof ht.Node;

});

listView.getIcon = function(data){

return 'icon';

};

listView.getLabel = function(data){

var name = data.getName(name);

var image = ht.Default.getImage(name);

if(image){

name += ' ( ' + image.width + ' X ' + image.height + ' )';

}

return name;

};

window.addEventListener("dragenter", dragEnter, false);

window.addEventListener("dragexit", dragExit, false);

window.addEventListener("dragover", dragOver, false);

window.addEventListener("drop", drop, false);

}

function dragEnter(evt) {

evt.stopPropagation();

evt.preventDefault();

}

function dragExit(evt) {

evt.stopPropagation();

evt.preventDefault();

}

function dragOver(evt) {

evt.stopPropagation();

evt.preventDefault();

}

function drop(evt) {

evt.stopPropagation();

evt.preventDefault();

dataModel.clear();

textArea.setText("");

lastNode = null;

var files = evt.dataTransfer.files;

var count = files.length;

for (var i = 0; i < count; i++) {

var file = files[i];

var reader = new FileReader();

reader.onloadend = handleReaderLoadEnd;

reader.file = file;

reader.readAsDataURL(file);

}

}

function handleReaderLoadEnd(evt) {

var reader = evt.target;

var file = reader.file;

var name = file.name;

name = name.substr(0, name.length - 4);

var text = "ht.Default.setImage('" + name + "', '" + reader.result + "');\n";

textArea.setText(textArea.getText() + text);

ht.Default.setImage(name, reader.result);

var note = 'Date: ' + file.lastModifiedDate.toLocaleString() + '\n'

+ 'Name: ' + file.name + '\n'

+ 'Size: ' + file.size + '\n'

+ 'Type: ' + file.type;

var node = new ht.Node();

node.setName(name);

node.setImage(name);

node.s({

'note': note,

'note.position': 3

});

dataModel.add(node);

if(lastNode){

var edge = new ht.Edge(lastNode, node);

dataModel.add(edge);

}

lastNode = node;

}

該代碼主要對window添加了dragenter、dragexit、dragover和drop的拖拽處理，大部分都是通過e.stopPropagation();和evt.preventDefault();阻止默認(rèn)行為，我們僅需在最后的drop事件中通過e.dataTransfer.files得到所有當(dāng)前拖拽文件信息，構(gòu)建FileReader進(jìn)行加載，然后對加載的信息構(gòu)建對應(yīng)DataModel中的ht.Node對象和屬性就完事了。

最后代碼中還有幾處使用HT for Web的技術(shù)細(xì)節(jié)值得提到，左側(cè)list列表通過自定義矢量圖標(biāo)，并且在定義矢量時(shí)采用了clip的功能，這樣列表的圖標(biāo)就會顯示成clip裁剪后的圓形效果。重載了listView.drawRowBackground函數(shù)，實(shí)現(xiàn)隔行變色的列表效果。重載了listView.getLabel顯示了更多的動態(tài)文本信息。通過listView.setVisibleFunc過濾不顯示連線信息在列表中。

總結(jié)

以上是生活随笔為你收集整理的html组态图动态拖拽,基于HTML5的Drag and Drop生成图片Base64信息的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。