HT for Web列表和3D拓扑组件的拖拽应用

很多可视化编辑器都或多或少有一些拖拽功能，比如从一个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(),
    view = listView.getView();

document.body.appendChild(view);

这时我们创建的是一个空的List组件，在浏览器上看不到任何东西，那么接下来我们就该把我们定义的数据添加到List组件上了：

products.forEach(function(product){
    var data = new ht.Data();
    data.a(product);
    listView.dm().add(data);
});

 

数据的添加是不是很简单，但是List组件上显示的内容默认是Data的name属性或displayName属性，在创建Data时，并没有对Data设置displayName或者name属性，所以这个时候在页面上看到的还是一个空的List组件，别急，我们可以在不设置displayName或name属性的情况下让组件显示效果图上的文本内容，请看：

listView.getLabel = function(data){
    return data.a('ProductName') + ' - $' + data.a('UnitPrice').toFixed(2);
};

 

嘿嘿，ListView组件提供了getLabel方法供用户重载来实现自定义显示文本内容，这下应该就可以显示文本内容了吧~

oh no~还是什么都没有，是不是还少了点什么呢~对了，忘记给ListView组件添加铺满浏览器的样式了，将厦门的样式添加到head标签中：

<style>
    html, body {
   
        padding: