draganddrop

很多可视化编辑器都或多或少有一些拖拽功能，比如从一个List列表中拖拽一个节点到拓扑组件上进行建模，并且在拖拽的过程中鼠标位置下会附带一个被拖拽节点的缩略图，那么今天我们就来实现这样的拖拽效果。 首先我们需要创建一个 List列表 ，在列表中加入图片信息，让List列表不那么单调，先来看看效果图。 接下来我们一步一步来是想这个List列表，先来解决下数据，在这里我就列举一两个： var products = [ { ProductId : 1, ProductName : "Chai", QuantityPerUnit : "10 boxes x 20 bags", UnitPrice : 18.00, Description : "Soft drinks, coffees, teas, beers, and ales" }, { ProductId : 2, ProductName : "Chang", QuantityPerUnit : "24 - 12 oz bottles", UnitPrice : 19.00, Description : "Soft drinks, coffees, teas, beers, and ales" }, …… ]; 有了数据，我们就可以来创建List组件了： var listView = new ht.widget.ListView(),

HTML5的Drag and Drop是很不错的功能，网上使用例子较多如 http://html5demos.com/drag ，但这些例子大部分没实际用途，本文将搞个有点使用价值的例子，通过Drag and Drop生成图片的 Base64 的字符串信息。 使用 Base64 方式的图片有诸多好处，可将多个图片信息整合到单个js文件避免多次http请求，可以避免WebGL例子跨域访问的安全限制无法本地文件运行等好处，当然弊端也不少例如不能有效利用浏览器图片缓存机制等。使 用HT for Web 的朋友会发现 HT 的例子很多注册图片都采用Base64的方式，这主要是为了方便用户直接本地文件打开 HT 的手册即可操作浏览，无需构建web服务器发布进行访问，用户常问然后将图片转出Base64信息，我们使用的就是本文介绍的小工具。 该工具由一个列表、一个拓扑图和一个文本框三部分组成，用户任意拖拽本地多图片文件到任意页面部分，HT自动将图片信息生成对应的DataModel数据模型，列表显示图片效果、名称和宽高信息，拓扑显示图片、修改时间和文件大小等信息，文本框生成对应注册到htDefault.setImage函数的代码片段，用户直接可以将文本框内的代码拷贝到自己的工程的js文件进行使用。 function init(){ dataModel = new ht.DataModel();