echarts统计图代码

Html

Css

.m {
	background-color:white;
	width:400px;
	height:300px;
	top:10px;
}

var mX, mY = 0
    var dX, dY = 0
    var brothersinfo = [] //所有兄弟节点的位置信息

function allow(ev) {
        ev.preventDefault();
    }

function drag(ev) {

ev.dataTransfer.setData("Text", ev.target.id);

//获得鼠标起始位置;
        var Pos = getMousePos()
        mX = Pos.x
        mY = Pos.y
        console.log("mousestart:", mX, mY)

//获得div偏移位置
        dX = ev.target.offsetLeft
        dY = ev.target.offsetTop
        console.log("divoffset:", dX, dY)

//获取兄弟节点的top,left,width(400),height(300)
        var childs = ev.target.parentNode.children
        var brothers = []
        for (var i = 0; i < childs.length; i++) {
            if (childs[i] !== ev.target)
                brothers.push(childs[i])
        }
        //console.log(brothers)
        brothersinfo = []
        brothers.forEach(function(item) {
            //parseInt的作用在于把'10px'变成'10'
            brothersinfo.push({
                'left': parseInt(item.style.left),
                'top': parseInt(item.style.top),
                'id': item.id
            })
        })
        //console.log(brothersinfo)
    }

function(ev) {
        var Ftop = 0
        var Fleft = 0
        ev.preventDefault();

//获得鼠标拖动距离
        var position = getMousePos()
        var x = position.x
        var y = position.y
        console.log("mousestop:", x, y)

var data = ev.dataTransfer.getData("Text");
        var targetdiv = document.getElementById(data)

//预计最终位置
        Ftop = dY + y - mY
        Fleft = dX + x - mX
        console.log("finalPos:", Ftop, Fleft)

if (!isInterset(Ftop, Fleft)) {
            console.log("判定结果不相交")
            targetdiv.style.top = Ftop + 'px'
            targetdiv.style.left = Fleft + 'px'
        } else {
            console.log("判定结果相交")
            //如果相交则回到原位
            targetdiv.style.top = dY + 'px'
            targetdiv.style.left = dX + 'px'
        }

document.getElementById('div1').appendChild(targetdiv);
        //document.getElementById(data).draggable=false
    }

function getMousePos(event) {
        var e = event || window.event;
        return {
            'x': e.screenX,
            'y': e.screenY
        }
    }

function isInterset(Ftop, Fleft) {
        var ftop = Ftop
        var fleft = Fleft
        try {
            //forEach无法跳出循环。只能用try的方法
            brothersinfo.forEach(function(item) {
                //obj2在obj1的上面 obj2.top+obj2.height<obj1.top
                //obj2在obj1的下面 obj2.top>obj1.top+obj1.height
                //obj2在obj1的左面 obj2.left+obj2.width<obj1.left
                //obj2在obj1的右面 obj2.left>obj1.left+obj1.width
                var btop = item.top
                var bleft = item.left
                // console.log(ftop,fleft,btop,bleft)
                // console.log('在obj上',ftop+300<btop)
                // console.log('在obj下',ftop>btop+300)
                // console.log('在obj左',fleft+400<bleft)
                // console.log('在obj右',fleft>bleft+400)
                //console.log(ftop+300<btop||ftop>btop+300||fleft+400<bleft||fleft>bleft+400)
                if (ftop + 300 < btop || ftop > btop + 300 || fleft + 400 < bleft || fleft > bleft + 400) {
                    console.log("和所有兄弟都不相交")
                } else {
                    console.log("和某个兄弟相交:", item.id)
                    throw new Error("yes")
                }
            })
        } catch (e) {
            if (e.message === "yes") return true
        }

return false
    }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

echarts统计图代码



代码描述：echarts统计图实列代码

更新时间：2020-09-05 23:26:44

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

叻、jer.Q

相关代码

echarts统计图代码

最新