基于jquery实现图片拖动和曲线拖放

Posted 2020-08-19 大饼酥

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于jquery实现图片拖动和曲线拖放相关的知识，希望对你有一定的参考价值。

此文章是基于　　搭建Jquery+SpringMVC+Spring+Hibernate+MySQL平台

功能：图片的拖动、曲线的拖放和绘制

一. Jquery插件介绍

　　1. raphael-min.js 绘制曲线的Jquery插件，版本2.1.4

二. 相关文件介绍

　　1. dragDrop.jsp：主界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>图片拖放和曲线拖动</title>
    <%@ include file="/common/basePath.jsp"%>
    <link href="content/css/demo/dragDrop.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
    <div id="holder"></div>

    <div id="backImgDiv" style="left: 0px; top: 0px;" title="可移动">
        <img id="backImg" src="content/images/dragDrop/backImg.png"/>
    </div>

    <div id="leftSideBar" style="z-index: 3;"> 
                            
        <div id="leftSideBarContents">            
            <div id="leftSideBarContentsInner">                                        
                <div id="dragLine" style="top:30px;left:15px;position:absolute;filter:alpha(opacity=100);opacity:1;">
                    <img src="content/images/dragDrop/greenLine.png" />
                </div>                                                    
            </div>
        </div>
        
        <span id="leftSideBarTab" style="cursor: pointer;position:absolute;top:20px;">
            <img id="leftSideBarImg" src="content/images/dragDrop/open.png" alt="工具栏" title="工具栏" />
        </span>
    </div>        
    
    <script type="text/javascript" src="content/js/jquery/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="content/js/core/utils.js"></script>
    <script type="text/javascript" src="content/js/core/common.js"></script>

    <script type="text/javascript" src="content/js/jquery-plugin/raphael/2.1.4/raphael-min.js"></script>
    <script type="text/javascript" src="viewModel/iot/dragDrop/moveDiv.js"></script>
    <script type="text/javascript" src="viewModel/iot/dragDrop/dragDrop.js"></script>
    <script type="text/javascript" src="viewModel/iot/dragDrop/curver.js"></script>
    <script type="text/javascript" src="viewModel/iot/dragDrop/leftBar.js"></script>

 </body>
</html>

View Code

　　2. moveDiv.js：实现图片的拖动功能

//判断是否可移动背景
isMoveBack = false;

//鼠标X坐标与DIV的Left坐标的差
leftSpace = 0;

//鼠标Y坐标与DIV的Top坐标的差
topSpace = 0;

//曲线第一个点相对左上角的距离
point1Left = [];
point1Top = [];

divId = null;

$(document).mousedown(function(e){
    // 兼容火狐和IE
    if((e.target && e.target.id == \'backImg\') ||
        (e.srcElement && e.srcElement.id == \'backImg\') || 
            (e.target && e.target.parentElement && e.target.parentElement.id == \'holder\')){ 
        divId = "backImgDiv";

        // 通知浏览器不要执行与事件关联的默认动作
        if(e.preventDefault)
            e.preventDefault();
        else 
            e.returnvalue = false;

        var backImgLeft = $(\'#\'+divId).offset().left;
        var backImgTop = $(\'#\'+divId).offset().top;

        leftSpace = e.clientX - backImgLeft;
        topSpace = e.clientY - backImgTop;

        if(("undefined" != typeof controls) && controls.length>0){
            for(var i=0;i<controls.length;i++){
                point1Left[i] = e.clientX - controls[i][1].attr("cx");
                point1Top[i] = e.clientY - controls[i][1].attr("cy");
            }
        }

        isMoveBack = true;    
    }
});

$(document).mouseup(function(e){
    if(isMoveLine){
        dragLineOnmouseup(e);
    }else if(isMoveBack){
        backImgOnmouseup(e);
    }
});

$(document).mousemove(function(e){    
    if(isMoveLine){
        dragLineOnmousemove(e);
    }else if(isMoveBack){        
        backImgOnmousemove(e);           
    }  
});

function backImgOnmouseup(e){
    divId = null;
    isMoveBack = false;
}

function backImgOnmousemove(e){
    if(divId == \'backImgDiv\'){    
        $(\'#\'+divId).offset({left:e.clientX - leftSpace, top:e.clientY - topSpace}); 
            
        if(("undefined" != typeof controls) && controls.length>0){
            for(var i=0;i<controls.length;i++){
                controls[i][0].update(e.clientX - point1Left[i], e.clientY - point1Top[i], true);
            }
        }
    } 
}

View Code

　　3. dragDrop.js：实现曲线的拖放功能

dragLine = new DragDrop("dragLine");

// 随鼠标移动的DragDiv
followDragDiv = null; 

// 鼠标偏移DragDiv水平和垂直方向的距离
mouseDivX = 0;  
mouseDivY = 0;

sideBarLeft = 0;
sideBarTop = 0;

isMoveLine = false;

function DragDrop(divId){
    $(\'#\'+divId).mousedown(function(e){            
        // 通知浏览器不要执行与事件关联的默认动作
        if(e.preventDefault)
            e.preventDefault();
        else 
            e.returnvalue = false;
            
        sideBarLeft = $(\'#leftSideBar\').offset().left;
        sideBarTop = $(\'#leftSideBar\').offset().top;

        var downPos = com.getMousePos(e);
        mouseDivX = downPos.x - this.offsetLeft - sideBarLeft;
        mouseDivY = downPos.y - this.offsetTop - sideBarTop;

        followDragDiv = document.createElement("div");
        followDragDiv.style.cssText = this.style.cssText;
        followDragDiv.style.width = this.offsetWidth;
        followDragDiv.style.height = this.offsetHeight;
        followDragDiv.style.left = this.offsetLeft + sideBarLeft + "px";
        followDragDiv.style.top = this.offsetTop + sideBarTop + "px";
        followDragDiv.style.zIndex = 3;
        followDragDiv.innerHTML = this.innerHTML;
        $(document.body).append(followDragDiv);        
            
        setOpacity(followDragDiv, 50);
        isMoveLine = true;
    });
}

function setOpacity(dragDiv, n){
    var ieVer = parseInt(com.getIeVersion());
    if (com.isIE && 5<ieVer && ieVer<10 ) {
        dragDiv.filters.alpha.opacity = n;
    } else {
        dragDiv.style.opacity = n / 100;
    }
}

function dragLineOnmouseup(e){
    isMoveLine = false;
    mouseDivX = 0;
    mouseDivY = 0;
    sideBarLeft = 0;
    sideBarTop = 0;
    followDragDiv.outerHTML = "";
    followDragDiv = null;

    var upPos = com.getMousePos(e);
  
    new Curver(upPos.x-(0.5*50), upPos.y, upPos.x-(0.5*50-20), upPos.y, upPos.x-(0.5*50-30), upPos.y, upPos.x-(0.5*50-50), upPos.y, "hsb(.3, .75, .75)", 0, 1);
}

function dragLineOnmousemove(e){
    if (isMoveLine) {
        var movePos = com.getMousePos(e);
        var dragArea = { maxLeft: 0, maxRight: $(window)[0].innerWidth - $(followDragDiv).width(), maxTop: 0, maxBottom: $(window)[0].innerHeight - $(followDragDiv).height() };
        followDragDiv.style.left = Math.max(Math.min(movePos.x - mouseDivX, dragArea.maxRight), dragArea.maxLeft) + "px";
        followDragDiv.style.top = Math.max(Math.min(movePos.y - mouseDivY, dragArea.maxBottom), dragArea.maxTop) + "px";
    }
}

View Code

　　4. curver.js：实现曲线的绘制功能

$(document).ready(function(){
    controls = [];
    selectControlId = null;

    windowHeight = $(window)[0].innerHeight;
    windowWidth = $(window)[0].innerWidth;
    r = Raphael("holder", windowWidth, windowHeight);  

    discattrWhite = {fill: "#fff", stroke: "none"};
    discattrBlack = {fill: "#000", stroke: "none"};    
});

$(window).resize(function(){
    windowHeight = $(window)[0].innerHeight;
    windowWidth = $(window)[0].innerWidth;
    
    r.setSize(windowWidth, windowHeight);
});

function Curver(x, y, ax, ay, bx, by, zx, zy, color, startPoint, endPoint) {
    this.init = function () {
        var path = [["M", x, y], ["C", ax, ay, bx, by, zx, zy]],
            path2 = [["M", x, y], ["L", ax, ay], ["M", bx, by], ["L", zx, zy]];
        var posi = controls.length;
        controls[posi] = r.set(
            r.path(path2).attr({stroke: "#ccc", "stroke-dasharray": ". "}),
            r.circle(x, y, 5).attr(discattrBlack),
            r.circle(ax, ay, 5).attr(discattrWhite),
            r.circle(bx, by, 5).attr(discattrWhite),
            r.circle(zx, zy, 5).attr(discattrBlack),
            r.path(path).attr({stroke: color || Raphael.getColor(), "stroke-width": 4, "stroke-linecap": "round"})
        );
        controls[posi][0].startPoint = startPoint;
        controls[posi][0].endPoint = endPoint;
        controls[posi][0].arrIndex = posi;
        controls[posi][0].update = function (x, y, isOffset) {
            if(isOffset){
                x = x - controls[this.arrIndex][1].attr("cx");
                y = y - controls[this.arrIndex][1].attr("cy");
            }
            controls[this.arrIndex][1].update(x, y);
            controls[this.arrIndex][4].update(x, y);
        };
        controls[posi][1].arrIndex = posi;
        controls[posi][1].update = function (x, y) {
            var X = this.attr("cx") + x,
                Y = this.attr("cy") + y;
            this.attr({cx: X, cy: Y});
            path[0][1] = X;
            path[0][2] = Y;
            path2[0][1] = X;
            path2[0][2] = Y;
            controls[this.arrIndex][2].update(x, y);
        };
        controls[posi][2].arrIndex = posi;
        controls[posi][2].update = function (x, y) {
            var X = this.attr("cx") + x,
                Y = this.attr("cy") + y;
            this.attr({cx: X, cy: Y});
            path[1][1] = X;
            path[1][2] = Y;
            path2[1][1] = X;
            path2[1][2] = Y;
            controls[this.arrIndex][5].attr({path: path});
            controls[this.arrIndex][0].attr({path: path2});
        };
        controls[posi][3].arrIndex = posi;
        controls[posi][3].update = function (x, y) {
            var X = this.attr("cx") + x,
                Y = this.attr("cy") + y;
            this.attr({cx: X, cy: Y});
            path[1][3] = X;
            path[1][4] = Y;
            path2[2][1] = X;
            path2[2][2] = Y;
            controls[this.arrIndex][5].attr({path: path});
            controls[this.arrIndex][0].attr({path: path2});
        };
        controls[posi][4].arrIndex = posi;
        controls[posi][4].update = function (x, y) {
            var X = this.attr("cx") + x,
                Y = this.attr("cy") + y;
            this.attr({cx: X, cy: Y});
            path[1][5] = X;
            path[1][6] = Y;
            path2[3][1] = X;
            path2[3][2] = Y;
            controls[this.arrIndex][3].update(x, y);
        };
        controls[posi][5].arrIndex = posi;
        controls[posi][5].update = function (x, y) {
            controls[this.arrIndex][0].update(x,y);
        };
        controls[posi].drag(this.move, this.up, false);
        controls[posi].click(function(){
            selectControlId = this.arrIndex;  
        });
        controls[posi].mouseover(function(e){
            this[0].style.cursor = \'pointer\';
        });
        controls[posi].mousemove(function(e){});    
        controls[posi].mouseout(function(e){
            this[0].style.cursor = \'default\';
        });
    }

    this.move = function(dx, dy) {
        this.update(dx - (this.dx || 0), dy - (this.dy || 0));
        this.dx = dx;
        this.dy = dy;
    }

    this.up = function() {
        this.dx = this.dy = 0;
    }

    this.init();
}

View Code

　　5. leftBar.js：实现左边工具条的隐藏和显示

$(document).ready(function(){
    $(\'#leftSideBar\').css(\'top\', $(window)[0].innerHeight/2 - $(\'#leftSideBarContents\').height()/2);
    var leftSideBarStatus = \'close\';
    $(\'#leftSideBarTab\').click(function () {
        if(leftSideBarStatus==\'open\'){
            leftSideBarClose();
            leftSideBarStatus = \'close\';
        }else{
            leftSideBarOpen();
            leftSideBarStatus = \'open\';
        }
        
        return false;
    });
});

function leftSideBarClose() {
    $(\'#leftSideBarImg\')[0].src = \'content/images/dragDrop/open.png\';
    $(\'#leftSideBar\').animate({
        left: \'-90px\'
    }, 300);
}

function leftSideBarOpen() {
    $(\'#leftSideBarImg\')[0].src = \'content/images/dragDrop/close.png\';        
    $(\'#leftSideBar\').delay(50).animate({
            left: \'0px\'
        }, 300);
}

View Code

三. 效果图： http://localhost:8080/ims/view/iot/dragDrop.jsp

以上是关于基于jquery实现图片拖动和曲线拖放的主要内容，如果未能解决你的问题，请参考以下文章

在两个片段之间拖放？

jquery可拖动和鼠标悬停

jQuery拖放 - 如何获取被拖动的元素

具有可拖放可拖动和可调整大小的 Jquery 无法按预期工作

jQuery拖放：克隆的可拖动移动原始

JQuery-UI 在 Re-Drag 上拖放和重新拖动克隆