View unanswered posts | View active topics It is currently 2022-12-07 11:05



Reply to topic  [ 25 posts ] 
 请问如何在twaver.canvas.Network中实现拖放 
Author Message
新手上路

Joined: 2014-11-28 9:34
Posts: 9
Post 请问如何在twaver.canvas.Network中实现拖放
拓扑画布采用的twaver.canvas.Network,同时创建了一个twaver.controls.Table
请问如何才能实现选中Table中某一排数据拖放到拓扑图中的某一链路上(也就是想将选中的table数据通过拖动的方式赋值到特定的链路上),谢谢?


2014-11-28 16:21
Profile
TWaver开发组
User avatar

Joined: 2009-04-20 18:37
Posts: 3115
Post Re: 请问如何在twaver.canvas.Network中实现拖放
首先让Network可以接受drop,参考demo中的demo.js中的createDraggableNetwork方法:
Code:
        network.getView().addEventListener('dragover', function (e) {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
            e.dataTransfer.dropEffect = 'copy';
            return false;
        }, false);
        network.getView().addEventListener('drop', function (e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            }
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
            var text = e.dataTransfer.getData('Text');
            if (!text) {
                return false;
            }
            if (text && text.indexOf('className:') == 0) {
                demo.Util._createElement(network, text.substr(10, text.length), network.getLogicalPoint(e));
            }
            return false;
        }, false);

然后让表格可以drag,参考demo.js中的addDraggableButton,这里要把button换成table:
Code:
    addDraggableButton: function (div, name, src, className) {
        var image = new Image();
        image.setAttribute('title', name);
        image.setAttribute('draggable', 'true');
        image.style.cursor = 'move';
        image.style.verticalAlign = 'top';
        image.style.padding = '4px 4px 4px 4px';
        if (src.indexOf('/') < 0) {
            src = '../images/toolbar/' + src + '.png';
        }
        image.setAttribute('src', src);
        image.addEventListener('dragstart', function (e) {
            e.dataTransfer.effectAllowed = 'copy';
            e.dataTransfer.setData('Text', 'className:' + className);
        }, false);
        div.appendChild(image);
        return image;
    },


2014-12-01 9:42
Profile
新手上路

Joined: 2014-11-28 9:34
Posts: 9
Post Re: 请问如何在twaver.canvas.Network中实现拖放
Network可以设置为可以被拖入。但是在table的column中加入了draggable='true'始终无法生效,html中已经写入了该属性,但是没有拖拽的效果,代码如下:

self.flowTable.onCellRendered = function (params) {
if (params.column.getName() === '名称') {
params.div.style.backgroundColor = params.data.getClient('stateColor');
if(params.div.getAttribute('draggable') != 'true') {
params.div.setAttribute('draggable', 'true');
params.div.addEventListener('dragstart', function (e) {
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('Text', 'className');
}, false);
}
}
};

是否是twaver.controls.Table中做了什么特殊限制把拖拽功能禁用了,麻烦解答下,谢谢?


2014-12-01 14:29
Profile
TWaver开发组
User avatar

Joined: 2014-02-11 8:59
Posts: 575
Post Re: 请问如何在twaver.canvas.Network中实现拖放
由于e.preventDefault阻止了事件的传播,可设置下面代码。
Code:
_twaver.html.createView = function (overflow, keepDefault) {
                var e = document.createElement('div');
                e.style.position = twaver.Defaults.VIEW_POSITION;
                e.style.fontSize = twaver.Defaults.VIEW_FONT_SIZE;
                e.style.fontFamily = twaver.Defaults.VIEW_FONT_FAMILY;
                e.style.cursor = 'default';
                e.style.outline = 'none';
                e.style.textAlign = "left";
                e.style.msTouchAction = "none";
                e.tabIndex = 0;

                if (keepDefault) {
                    // do nothing
                } else {
                   // e.onmousedown = $html.preventDefault;
                }
                if (e.style.setProperty) {
                    e.style.setProperty("-khtml-user-select", "none", null);
                    e.style.setProperty("-webkit-user-select", "none", null);
                    e.style.setProperty("-moz-user-select", "none", null);
                    e.style.setProperty("-webkit-tap-highlight-color", "rgba(0, 0, 0, 0)", null);

                }
                if (overflow) {
                    e.style.overflow = overflow;
                }
                return e;
            }


2014-12-01 23:45
Profile
新手上路

Joined: 2014-11-28 9:34
Posts: 9
Post Re: 请问如何在twaver.canvas.Network中实现拖放
设置e.preventDefault后拖动问题解决了,非常感谢。
另外还有一个问题请教下,我期望将表中的数据拖放到链路上进行后续逻辑处理,由于是canvas的画布,链路没有对应的dom标签,无法使用html5的dom拖放,请问是否是只能通过画布的X,Y坐标来判断是否在链路上?若是这样的话怎么获取链路的X,Y坐标?


2014-12-02 9:02
Profile
TWaver开发组
User avatar

Joined: 2014-02-11 8:59
Posts: 575
Post Re: 请问如何在twaver.canvas.Network中实现拖放
在drop的时候可以获取鼠标下面的网元:
Code:
network.getElementAt(e);


2014-12-02 9:27
Profile
新手上路

Joined: 2014-11-28 9:34
Posts: 9
Post Re: 请问如何在twaver.canvas.Network中实现拖放
非常感谢!


2014-12-02 17:24
Profile
TWaver开发组
User avatar

Joined: 2014-02-11 8:59
Posts: 575
Post Re: 请问如何在twaver.canvas.Network中实现拖放
grin


2014-12-02 20:52
Profile
新手上路

Joined: 2016-03-08 20:03
Posts: 7
Post Re: 请问如何在twaver.canvas.Network中实现拖放
我在界面中动态增加一个Image的div。这个Div里面的图片为何一直拖拽不了啊。如果我把这个Image所在的div当做BorderPanel的顶部加进来就能拖拽。
代码如下:望回复。


2016-03-08 20:19
Profile
新手上路

Joined: 2016-03-08 20:03
Posts: 7
Post Re: 请问如何在twaver.canvas.Network中实现拖放
添加图片参考的是addDraggableButton这个方法。但是image上面的dragstart事件总是监听不到。
image所在的div是以appendChild的方式加入到network的


2016-03-08 20:24
Profile
新手上路

Joined: 2016-03-08 20:03
Posts: 7
Post Re: 请问如何在twaver.canvas.Network中实现拖放
我使用的是twaver.network.Network


2016-03-08 20:25
Profile
TWaver开发组
User avatar

Joined: 2014-02-11 8:59
Posts: 575
Post Re: 请问如何在twaver.canvas.Network中实现拖放
麻烦提供下代码?


2016-03-09 9:38
Profile
新手上路

Joined: 2016-03-08 20:03
Posts: 7
Post Re: 请问如何在twaver.canvas.Network中实现拖放
公司上传不了代码。。。
RainBowTopo = function () {
this.leftBox = new twaver.ElementBox();
this.rightBox = new twaver.ElementBox();
this.leftBox.getSelectionModel().setSelectionMode("singleSelection");
this.rightBox.getSelectionModel().setSelectionMode("singleSelection");
this.leftNetwork = new twaver.network.Network(this.leftBox);
this.rightNetwork = new twaver.network.Network(this.rightBox);
this.leftAutoLayouter = new twaver.layout.AutoLayouter(this.leftBox);
this.rightAutoLayouter = new twaver.layout.AutoLayouter(this.rightBox);
this.leftTopDiv = document.createElement('div');
};
var CLOUDRESOURCE = 1;
var HOSTPOOL = 2;
var CLUSTER = 3;
var HOST = 4;
var VM = 5;
var DISTINCE = 20;

twaver.Util.ext('RainBowTopo', Object, {
init: function (show, showOverview) {
this.leftAutoLayouter.setAnimate(false);
this.rightAutoLayouter.setAnimate(false);
topo.Util.initImageResouce(this.leftNetwork);
topo.Util.initImageResouce(this.rightNetwork);
var mainSplitPanel = new twaver.controls.SplitPane(this.leftNetwork, this.rightNetwork, 'horizontal', 0.5);
mainSplitPanel.setDividerWidth(2);
mainSplitPanel.setDividerDraggable(false);
var main = document.getElementById('main');
topo.Util.appendChild(mainSplitPanel.getView(), main, 0, 0, 0, 0);
window.onresize = function (e) {
mainSplitPanel.invalidate();
};
this.initBox(show);
var self = this;
$(document).bind("contextmenu", function (e) {
return false;
});

this.rightNetwork.setMovableFunction(function (element) { return false; });
self.rightNetwork.getView().addEventListener('dragover', function (e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
e.dataTransfer.dropEffect = 'copy';
return false;
}, false);
self.rightNetwork.getView().addEventListener('drop', function (e) {
if (e.stopPropagation) {
e.stopPropagation();
}
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
var text = e.dataTransfer.getData('Text');
if (!text) {
return false;
}
if (text && text.indexOf('className:') == 0) {
var className = text.substr(10, text.length);
//self.openSetUpDiv(className, self, e);
}
return false;
}, false);
twaver.Styles.setStyle('select.style', 'border');

this.leftNetwork.addInteractionListener(function (e) {
if (e.kind === 'doubleClickElement' && e.element && e.element.getClassName() == 'twaver.Node') {
console.log(e.element.getName() + 'doubleClick');//属性信息,用户属性可使用getClient();
var type = e.element.getClient('type');
var name = e.element.getClient('name');
var id = e.element.getClient('id');
if (type == HOST) {
console.log(e.event.pageX);
console.log(e.event.pageY);
self.leftTopDiv.style.width="100px";
self.leftTopDiv.style.height="100px";
self.leftTopDiv.style.background="#EEE";
// add image
var image = new Image();
image.setAttribute('title', 'testwei');
image.setAttribute('draggable', 'true');
image.style.cursor = 'move';
image.style.verticalAlign = 'top';
image.style.padding = '4px 4px 4px 12px';
image.setAttribute('src', './images/clouds.png');
image.addEventListener('dragstart', function (e) {
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('Text', 'className: aa');
}, false);
self.leftTopDiv.appendChild(image);
topo.Util.appendChild(self.leftTopDiv,self.leftNetwork.getView(), e.event.pageY, 0, 0, e.event.pageX);
}
} else if (e.kind === 'clickElement') {
console.log(e);
}
});
},
gc: function () {
this.box = null;
this.leftBox = null;
this.rightBox = null;
this.network = null;
this.leftAutoLayouter = null;
this.rightAutoLayouter = null;
this.toolbar = null;
},
createNode : function(data) {
var node = new twaver.Node();
if (data && data.name) {
node.setToolTip("<b>" + data.name + "</b>");
node.setName(data.name);
}
var image = topo.Util.getImageByType(data);
if (image) {
node.setImage(image);
} else {
node.setImage("cloud");
}
this.setClientValues(node, data);
return node;
},
setClientValues : function (node, data) {
node.setClient("type", data.type);
node.setClient("id", data.id);
node.setClient("name", data.name);
},
createLink : function(from, to, layoutId) {
var link = new twaver.Link(from, to);
link.setStyle('link.width', 1);
link.setStyle('link.color', '#00FF00');
link.setStyle('link.type', 'arc');
return link;
},
analyJson: function (data,layer, box){
if (data != null) {
var root = this.createNode(data);
box.add(root);
if (data.children) {
// 增加主机池
var cloudNode = root;
for (var pIndex = 0; pIndex < data.children.length; pIndex++) {
var poolData = data.children[pIndex];
var pDataNode = this.createNode(poolData);
box.add(pDataNode);
var pLink = this.createLink(cloudNode, pDataNode);
box.add(pLink);
if (poolData.children) {
// 增加集群
var pFrom = pDataNode;
for (var cIndex = 0; cIndex < poolData.children.length; cIndex++) {
var clusterData = poolData.children[cIndex];
var cDataNode = this.createNode(clusterData);
box.add(cDataNode);
var cLink = this.createLink(pFrom, cDataNode);
box.add(cLink);
if (clusterData.children) {
// 增加主机
var cFrom = cDataNode;
for (var hIndex = 0; hIndex < clusterData.children.length; hIndex++) {
var hostData = clusterData.children[hIndex];
var hDataNode = this.createNode(hostData);
box.add(hDataNode);
var hLink = this.createLink(cFrom, hDataNode);
box.add(hLink);
}
}
}
}
}
}
}
},
initBox: function (show) {
var self = this;
$.ajax({
type: "GET",
dataType: "json",
url: "test.json",
async: false,
success: function (topo_data) {
self.analyJson(topo_data, null,self.leftBox);
var result = self.leftAutoLayouter.doLayout('hierarchic');
self.analyJson(topo_data, null,self.rightBox);
var result = self.rightAutoLayouter.doLayout('hierarchic');
console.log(result);
}
});
}
});


2016-03-09 10:59
Profile
新手上路

Joined: 2016-03-08 20:03
Posts: 7
Post Re: 请问如何在twaver.canvas.Network中实现拖放
image.addEventListener('dragstart', function (e) {
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('Text', 'className: aa');
}, false);
self.leftTopDiv.appendChild(image); 是这个image不生效


2016-03-09 17:02
Profile
新手上路

Joined: 2016-03-08 20:03
Posts: 7
Post Re: 请问如何在twaver.canvas.Network中实现拖放
:? :?
人呢?


2016-03-10 14:15
Profile
TWaver开发组
User avatar

Joined: 2014-02-11 8:59
Posts: 575
Post Re: 请问如何在twaver.canvas.Network中实现拖放
不是很明白您这边想做什么功能,方便的话可以给我发一封邮件,告知您的电话,我们电话沟通一下。
我的邮箱jeff.fu@servasoft.com


2016-03-10 14:44
Profile
新手上路

Joined: 2016-03-08 20:03
Posts: 7
Post Re: 请问如何在twaver.canvas.Network中实现拖放
Json格式
{
"type": 1,
"total": 4,
"children": [
{
"id": 1,
"name": "pool1",
"type": 2,
"total": 4,
"children": [
{
"id": 2,
"name": "sc",
"type": 3,
"status": 1
},
{
"id": 3,
"name": "test",
"type": 3,
"status": 0
},
{
"id": 4,
"name": "aaaa",
"type": 3,
"status": 1,
"total": 4,
"children": [
{
"id": 6,
"name": "cas89",
"type": 4,
"status": 1,
"total": 4
}
]
},
{
"id": 6,
"name": "asdasd",
"type": 3,
"status": 0
},
{
"id": 7,
"name": "testwwww",
"type": 3,
"status": 1
},
{
"id": 8,
"name": "testwwww1111",
"type": 3,
"status": 0
}
]
},
{
"id": 3,
"name": "wei",
"type": 2,
"total": 0,
"children": [
{
"id": 5,
"name": "asd",
"type": 3,
"status": 0
}
]
}
]
}


2016-03-10 14:50
Profile
TWaver开发组
User avatar

Joined: 2014-02-11 8:59
Posts: 575
Post Re: 请问如何在twaver.canvas.Network中实现拖放
刚电话您没打通,
我理解您的意思是想在network上层添加一个Image图标,希望将这个图标实现drag事件,但是一直不能捕获这个事件。
您这样操作是存在问题的,因为图标的drag的事件与network中框选的事件会引起冲突。


2016-03-10 16:37
Profile
新手上路

Joined: 2017-06-27 10:49
Posts: 21
Post Re: 请问如何在twaver.canvas.Network中实现拖放
您好,请问我在生成node的时候在client中写入了参数siteId,我在拖动树上的node时候怎样获取这个值?
var node11 = new twaver.Group({});
node11.setName(result[i].text);
node11.setClient('siteId',result[i].id);
node11.setParent(node1);
box2.add(node11);
获取这样写的:
div.addEventListener('dragstart', function(e) {
e.dataTransfer.effectAllowed = 'copy';
//设置被拖数据的数据类型和值:
e.dataTransfer.setData('Text', 'className:' + name);
//获取点击事件中的节点名称
e.dataTransfer.setData('nodeName', e.currentTarget.title);
//获取站点Id
e.dataTransfer.setData('siteId', e.currentTarget.getClient('siteId'));
}
但是这样报错,请问怎样取到‘siteId’的值?


2017-06-27 11:04
Profile
TWaver开发组
User avatar

Joined: 2017-06-05 10:42
Posts: 45
Post Re: 请问如何在twaver.canvas.Network中实现拖放
您好,代码不是很全,不是太明白,您看一看e.currentTarget是不是node节点。


2017-06-27 11:38
Profile
新手上路

Joined: 2017-06-27 10:49
Posts: 21
Post Re: 请问如何在twaver.canvas.Network中实现拖放
sam wrote:
您好,代码不是很全,不是太明白,您看一看e.currentTarget是不是node节点。


要实现将左边的省份鼠标拖动到右边生成一个node,这个node的名字为左边的名字,其中的siteId为传递进去的siteId的值。但是现在无法获取siteId的值。
e.currentTarget是node所在的div。


Attachments:
AWKI7WMI_J_YA51NF(QKPM8.png
AWKI7WMI_J_YA51NF(QKPM8.png [ 17.97 KiB | Viewed 15471 times ]
2017-06-27 13:26
Profile
TWaver开发组
User avatar

Joined: 2017-06-05 10:42
Posts: 45
Post Re: 请问如何在twaver.canvas.Network中实现拖放
您好,e.currentTarget是node所在的div,div是没有siteId这个属性的,应该通过node节点获取siteId这个属性。


2017-06-27 15:00
Profile
新手上路

Joined: 2017-06-27 10:49
Posts: 21
Post Re: 请问如何在twaver.canvas.Network中实现拖放
sam wrote:
您好,e.currentTarget是node所在的div,div是没有siteId这个属性的,应该通过node节点获取siteId这个属性。

请问怎样才能取到node下面siteId这个属性?谢谢!


2017-06-27 17:31
Profile
TWaver开发组
User avatar

Joined: 2017-06-05 10:42
Posts: 45
Post Re: 请问如何在twaver.canvas.Network中实现拖放
您好,您可以通过twaver.controls.ListBase.getDataAt (e)或network.getElementAt(e)获取鼠标下的网元节点node,通过node.getClient('sited')获取sited属性。


2017-06-27 18:17
Profile
新手上路

Joined: 2017-06-27 10:49
Posts: 21
Post Re: 请问如何在twaver.canvas.Network中实现拖放
sam wrote:
您好,您可以通过twaver.controls.ListBase.getDataAt (e)或network.getElementAt(e)获取鼠标下的网元节点node,通过node.getClient('sited')获取sited属性。

使用
var node = network.getSelectionModel().getLastData();
获取拖动前选中的最后一个对象就可以了。


2017-06-27 20:03
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 25 posts ] 

Who is online

Users browsing this forum: No registered users and 5 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
./cache/ is NOT writable.