2021-7-29总结

1. 如何使用jquery-UI同时拖动两个选中的元素
2. react-beautiful-dnd的使用demo
3. antd x6如何拖动两个选中的元素
4. js的事件系统如何编写
5. echarts如何编写随着事件变化的代码

问题三 antd x6如何拖动两个选中的元素

1. 在真实的图形上面创建一个绝对定位的div
2. 拖动绝对定位的div
3. 修改真实图形的left和top值

jsplumb中如何拖动两个选中的元素

// 添加到Selections中
that.jsPlumb.addToDragSelection(dom.id)
function addToDragSelection(){
    _getDragManager(this).select(spec);
}
function _getDragManager(this){
    return new window.katavorio({})// 拖拽管理库
}
window.katavorio = function(){
    this.select = function(el) {
        _each(el, function() {
            var _el = _gel(this);// 获取当前的instance
            if (_el && _el._katavorioDrag) {
                if (!_selectionMap[_el._katavorio]) {
                    _selection.push(_el._katavorioDrag);// 添加到一个数组里
                    _selectionMap[_el._katavorio] = [ _el, _selection.length - 1 ];
                    katavorioParams.addClass(_el, _css.selected);
                }
            }
        });
        return this;
    };
}

问题一、如何使用jquery-UI同时拖动两个选中的元素

1. 参照ant x6的方法，调用jquery-ui的dragable方法
2. 在dragable方法中传helper创建一个临时的div
3. 计算框选的元素的包围尺寸
4. 把helper的设置成包围盒的尺寸
5. 根据包围盒的移动设置真实图形的位置