右边不是滚动盒子,是一个拖拽盒子的话
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery.js"></script>
<style>
*{
box-sizing: border-box;
}
.drafting_box{
display: flex;
border: 1px solid #000;
border-radius: 6px;
height: 600px;
}
.drafting_box .nav_list,
.drafting_box .show_box{
height: 100%;
overflow: hidden;
}
.drafting_box .nav_list{
width: 120px;
border-right: 1px solid #000;
padding: 15px;
}
.drafting_box .show_box{
position: relative;
flex: 1;
}
.item{
display: inline-block;
padding: 5px 8px;
background-color: aqua;
border-radius: 4px;
cursor: pointer;
margin: 6px;
}
.tree_wrap{
width: 100%;
height: 100%;
overflow: hidden;
}
.tree{
width: 1500px;
height: 800px;
position: relative;
}
.add{
position: absolute;
left: 10px;
top: 10px;
width: 40px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: aqua;
border-radius: 4px;
cursor: pointer;
}
span{
position: absolute;
padding: 5px 8px;
border-radius: 4px;
background-color: green;
}
</style>
</head>
<body>
<div class="drafting_box">
<div class="nav_list ruleList">
<div class="item" onselectstart="return false">规则1</div>
<div class="item" onselectstart="return false">规则2</div>
<div class="item" onselectstart="return false">规则3</div>
</div>
<div class="show_box">
<div class="add" onclick="showScroll()">add</div>
<div class="tree">
</div>
</div>
</div>
<script>
function showScroll(){
console.log( $('.tree_wrap').position());
console.log( $('.tree_wrap').scrollTop());
console.log( $('.tree_wrap').scrollLeft());
}
function createCell(opt){
console.log(opt);
var html = $('<span class="cell">'+opt.text+'</span>');
$('.tree').append(html);
$(html).css({
left:opt.x - opt.deflectX,
top:opt.y - opt.deflectY
});
}
//左侧拖入右侧框框
(function drag(){
var position, tempEle,deflectX,deflectY;
$('.ruleList .item').on('mousedown',function(e){
console.log(e.target);
deflectX = e.offsetX;
deflectY = e.offsetY;
$('body').attr('onselectstart','return false');
$('.show_box').css('pointerEvents','none');
$('.tree').css('pointerEvents','initial');
position = $(this).position();
tempEle = $(this).clone();
tempEle.addClass('tempRule');
tempEle.css({
position:'absolute',
left:position.left,
top:position.top
});
$('.ruleList').append(tempEle);
var initX = e.clientX,
initY = e.clientY;
$(document).on('mousemove',function(e){
var curX = e.clientX,
curY = e.clientY;
tempEle.css({
left:curX - initX + position.left,
top:curY - initY + position.top
});
})
});
$(document).on('mouseup',function(e){
console.log($(e.target).hasClass('tree'));
$('body').attr('onselectstart','return true');
$('.show_box').css('pointerEvents','initial');
//根据被拖进来元素生成元素
//如果临时元素存在,也就是鼠标按下时实在规则元素上
if(tempEle && tempEle.length>0){
if($(e.target).hasClass('decision_tree')){
tree.addCell({
text:tempEle.text(),
x:e.offsetX,
y:e.offsetY,
deflectX:deflectX || 0,
deflectY:deflectY || 0
});
}
tempEle.remove();
tempEle = null;
}
})
})();
//画布拖拽
function dragEle(opt){
//可以来点判断,当调用这个函数时输入参数错误时提示
if(!opt.dragEle){
console.log('要拖拽的元素是哪个');
}
var dragEle = opt.dragEle;
var dragWrap = opt.dragWrap;
//原理,点击元素,获取源位置,移动鼠标,获取目标位置,鼠标移动多少元素移动多少
var sourcePos = {left:0,top:0};
var targetPos = {left:0,top:0};
var elePos = {left:0,top:0};
//元素宽高为了碰撞检测
var box = {height:dragWrap.height(),width:dragWrap.width()};
var son = {height:0,width:0};
dragEle.mousedown(function(event){
elePos.left = dragEle.position().left;
elePos.top = dragEle.position().top;
sourcePos.left=event.pageX;
sourcePos.top=event.pageY;
son.width = dragEle.width();
son.height = dragEle.height();
$(document).mousemove(function(event){
targetPos.left = event.pageX;
targetPos.top = event.pageY;
//这个elePos为元素位置,点击时获取
var left = elePos.left + targetPos.left - sourcePos.left;
var top = elePos.top + targetPos.top - sourcePos.top;
//碰撞检测
if(left>0){
left = 0;
}
if(top>0){
top = 0;
}
if(left<box.width-son.width){
left = box.width-son.width;
}
if(top<box.height-son.height){
top = box.height-son.height;
}
dragEle.css({
left: left + 'px',
top: top + 'px'
})
});
});
dragEle.mouseup(function(){
$(document).off('mousemove');
});
}
dragEle({
dragEle: $('.tree'),
dragWrap: $('.show_box')
});
</script>
</body>
</html>