我正在处理一个项目,我必须拖放元素并对这些元素执行一些进一步的操作。目前,我试图将元素的位置放在容器上,但在调试器中出现以下错误。
错误
trail.js:262 Uncaught TypeError:无法读取属性' top'未定义的
上下文中的方法
function saveFlowchart(){
var nodes = [];
//////////////////////////////////////////////////////////////////
//Code in Context to the question//
var matches = [];
var searchEles = document.getElementById("container").children;
for(var i = 0; i < searchEles.length; i++)
{
matches.push(searchEles[i]);
alert("elements: "+ searchEles[i].id);
var idOfEl = searchEles[i].id;
var $element = $(idOfEl);
var position = $element.position();
position.bottom = position.top + $element.height();
position.right = position.left + $element.width();
alert("Top position: " + position.top + "\nLeft position: " + position.left + "\nBottom position: " + position.bottom + "\nRight position: " + position.right);
}
/////////////////////////////////////////////////////
$(".node").each(function (idx, elem) {
var $elem = $(elem);
var endpoints = jsPlumb.getEndpoints($elem.attr('id'));
console.log('endpoints of '+$elem.attr('id'));
console.log(endpoints);
nodes.push({
blockId: $elem.attr('id'),
nodetype: $elem.attr('data-nodetype'),
positionX: parseInt($elem.css("left"), 10),
positionY: parseInt($elem.css("top"), 10)
});
});
var connections = [];
$.each(jsPlumb.getConnections(), function (idx, connection) {
connections.push({
connectionId: connection.id,
pageSourceId: connection.sourceId,
pageTargetId: connection.targetId
});
});
var flowChart = {};
flowChart.nodes = nodes;
flowChart.connections = connections;
flowChart.numberOfElements = numberOfElements;
var flowChartJson = JSON.stringify(flowChart);
//console.log(flowChartJson);
$('#jsonOutput').val(flowChartJson);
}
此方法保存连接并以json格式输出。但我也需要重新定制自定义元素。这就是为什么我试图找到位置并重新生成它们以便我可以重新创建所创建的流程图。
在这方面的任何帮助将不胜感激。
答案 0 :(得分:1)
以下内容可能会有所帮助
上一行代码
var $element = $(idOfEl);
更改为
var $element = $("#" + searchEles[i].id);