Я написал код для моего разборного дерева, которое отлично работает на экране рабочего стола.Я щелкаю по узлу, по узлу расширяю дальше потомка и так далее.Когда я mousedown на узле, он перетаскивает правильно.
Но когда я открываю дерево на моем устройстве, таком как Android или iphone, оно не работает должным образом.Событие клика работает правильно.Нажав на узел, он расширяется, но когда я хочу перетащить узел, он не перетаскивает.
Когда я нажимаю, чтобы удержать узел на моем мобильном устройстве, выбирается текст узла, а это не то, что мне нужно.,
Я использовал событие touchstart, touchend, предоставленное d3.js.
Мой код для мобильного телефона ниже: -
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var dragMobile = function(d) {
// d3.event.stopPropagation();
svg.on("touchstart", function() {
d3.event.stopPropagation();
var m = d3.touches(svg.node());
moveMobile(d, parseInt(m[0]) - parseInt(d.y), parseInt(m[0][1]) - parseInt(d.x));
link.attr("d", diagonal);
node.attr("transform", function(d) { return "translate(" + [d.y, d.x] + ")"; });
})
.on("touchend", function() {
svg.on("touchstart", null);
});
};
...
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); })
.on("touchstart", dragMobile);
...
var nodeEnter = node.enter().append("g")
.on("click", click)
.on("touchstart", dragMobile);
Моя функция перемещения: -
function moveMobile(root, xOffset, yOffset) {
root.x += yOffset;
root.y += xOffset;
if (root.children) {
root.children.forEach(function(d) { move(d, xOffset, yOffset); });
}
};