我正在使用jsPlumb库来实现一个简单的接口,在该接口中可以将元素从工具箱中拖放到容器上。在这里,我有一个element('partitiondrop'),它需要同时调整大小和拖动。但是,以下代码不允许调整分区大小。如果没有jsPlumb.draggable
,则resize函数可以工作,但是一旦删除元素,就不能将其拖动。
drop: function (e, ui) {
var dropElem = ui.draggable.attr('class');
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
$(droppedElement).draggable({containment: "container"});
jsPlumb.repaint(ui.helper);
var newAgent = $('<div>').attr('id', i).addClass('partitiondrop');
$(droppedElement).draggable({containment: "container"});
newAgent.css({
'top': e.pageY,
'left': e.pageX
});
$('#container').append(newAgent);
jsPlumb.draggable(newAgent, {
containment: 'parent'
});
$(newAgent).resizable({
resize : function(event, ui) {
jsPlumb.repaint(ui.helper);
}
});
}
用于partitiondrop的CSS
.partitiondrop {
border: 1px solid #346789;
resize: both;
overflow-x: hidden;
overflow-y: hidden;
...
z-index: 20;
position: absolute;
...
box-sizing: border-box;
}
在这方面的建议将受到高度赞赏。
您可以为此使用interact.js Javascript库。它提供了广泛的函数库,特别是同时执行大小调整和拖动的方法。
interact('.resize-drag')
.draggable({
onmove: window.dragMoveListener
})
.resizable({
preserveAspectRatio: true,
edges: { left: true, right: true, bottom: true, top: true }
})
.on('resizemove', function (event) {
var target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0),
y = (parseFloat(target.getAttribute('data-y')) || 0);
// update the element's style
target.style.width = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';
// translate when resizing from top or left edges
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.webkitTransform = target.style.transform =
'translate(' + x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.textContent = Math.round(event.rect.width) + '×' + Math.round(event.rect.height);
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句