问题描述

我在网上看到一个人用jquery写出来了一个，图片拖拽,是图片副本被拖拽到一个div内而原图不动，但我不是太了解，我另一个事件是拖动图片四周进行放大缩小，也支持随意拖动，我现在就是不知道怎么整合他们了，因为一个使用js写的，一个是用jquery写的。

问题出现的环境背景及自己尝试过哪些方法

现在的毛病有一点是，我不知道怎么整合这两个事件一起，还有一点是，复制上去的图片，他会固定在那里，就导致我换其他的排版他还在，而且是以第一次拖动的位置保持不变。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）html
<div class="fot">

    <div class="example duo" id="example_nav_header">
        <div class="example__demo duo__cell">
            <div class="carousel carousel--show-several carousel--selected-cell"
                data-flickity="{ &quot;groupCells&quot;: true }"
                style="left: 450px !important;">
                <div class="carousel-cell">
                    <a href="javascript:;" id=btn1> <img src="image/p1.png"
                        style="position: absolute; width: 131px; height: 140px;" />
                    </a>
                </div>
                <div class="carousel-cell">
                    <a href="javascript:;" id=btn2> <img src="image/p1.png"
                        style="position: absolute; width: 131px; height: 140px;" />
                    </a>
                </div>
                <div class="carousel-cell">
                    <a href="javascript:;" id=btn3> <img src="image/p1.png"
                        style="position: absolute; width: 131px; height: 140px;" />
                    </a>
                </div>

                <div class="carousel-cell">
                    <a href="javascript:;" id=btn4> <img src="image/p1.png"
                        style="position: absolute; width: 131px; height: 140px;" />
                    </a>
                </div>
                <div class="carousel-cell">
                    <a href="javascript:;" id=btn5> <img src="image/p1.png"
                        style="position: absolute; width: 131px; height: 140px;" />
                    </a>
                </div>
                <div class="carousel-cell">
                    <a href="javascript:;" id=btn6> <img src="image/p1.png"
                        style="position: absolute; width: 131px; height: 140px;" />
                    </a>
                </div>

                <div class="carousel-cell">
                    <a href="javascript:;" id=btn7> <img src="image/p1.png"
                        style="position: absolute; width: 131px; height: 140px;" />
                    </a>
                </div>
                <div class="carousel-cell">
                    <a href="javascript:;" id=btn8> <img src="image/p1.png"
                        style="position: absolute; width: 131px; height: 140px;" />
                    </a>
                </div>
                <div class="carousel-cell">
                    <a href="javascript:;" id=btn9> <img src="image/p1.png"
                        style="position: absolute; width: 131px; height: 140px;" />
                    </a>
                </div>

                <div class="carousel-cell">
                    <a href="javascript:;" id=btn10> <img src="image/p1.png"
                        style="position: absolute; width: 131px; height: 140px;" />
                    </a>
                </div>
                <div class="carousel-cell">
                    <a href="javascript:;" id=btn11> <img src="image/p1.png"
                        style="position: absolute; width: 131px; height: 140px;" />
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="div-rows-col">
    <!-- 一 -->
    <div class="row one" id="div1" style="display: none;">
        <div class="col-xs-12 col-md-12"></div>
    </div>

    <!-- 二 -->
    <div class="row two" id="div2" style="display: none;">
        <div class="col-xs-6" id="two"></div>
        <div class="col-xs-6" id="two"></div>
        <div class="col-xs-6" id="two"></div>
        <div class="col-xs-6" id="two"></div>
    </div>

    <!-- 三 -->
    <div class="row three" id="div3" style="display: none;">
        <div class="col-xs-6" id="col-xs-6-three"></div>
        <div class="col-xs-6" id="three"></div>
        <div class="col-xs-6" id="three"></div>
        <div class="col-xs-6" id="three"></div>
    </div>

    <!-- 四 -->
    <div class="row four" id="div4" style="display: none;">
        <div class="col-xs-12 col-sm-6 col-md-8" id="four-one"></div>
        <div class="col-xs-6 col-md-4" id="four"></div>
        <div class="col-xs-6 col-md-4" id="four"></div>
        <div class="col-xs-6 col-sm-4" id="four"></div>
        <div class="col-xs-6 col-sm-4" id="four"></div>
        <div class="col-xs-6 col-sm-4" id="four"></div>
    </div>

    <!-- 五-->
    <div class="row five" id="div5" style="display:block;">
        <div class="col-xs-6 col-md-4" id="five"></div>
        <div class="col-xs-6 col-md-4" id="five"></div>
        <div class="col-xs-6 col-md-4" id="five"></div>
        <div class="col-xs-6 col-sm-4" id="five"></div>
        <div class="col-xs-6 col-sm-4" id="five"></div>
        <div class="col-xs-6 col-sm-4" id="five"></div>
        <div class="col-xs-6 col-sm-4" id="five"></div>
        <div class="col-xs-6 col-sm-4" id="five"></div>
        <div class="col-xs-6 col-sm-4" id="five"></div>
    </div>

    <!-- 六-->
    <div class="row six" id="div6" style="display: none;">
        <div class="col-xs-6 col-md-4" id="six"></div>
        <div class="col-xs-6 col-md-4" id="six"></div>
        <div class="col-xs-6 col-md-4" id="six"></div>
        <div class="col-xs-6 col-sm-4" id="six"></div>
        <div class="col-xs-6 col-sm-4" id="six"></div>
        <div class="col-xs-6 col-sm-4" id="six"></div>
        <div class="col-xs-6 col-sm-4" id="six"></div>
        <div class="col-xs-6 col-sm-4" id="six"></div>
        <div class="col-xs-6 col-sm-4" id="six"></div>
        <div class="col-xs-6 col-sm-4" id="six"></div>
        <div class="col-xs-6 col-sm-4" id="six"></div>
        <div class="col-xs-6 col-sm-4" id="six"></div>
    </div>
    <div class="row" id="div7" style="display: none;">
    </div>
    <div class="row" id="div8" style="display: none;">
    </div>
    <div class="row" id="div9" style="display: none;">
    </div>
    <div class="row" id="div10" style="display: none;">
    </div>
    <div class="row" id="div11" style="display: none;">
    </div>
    <div id="div12" style="display: none;">

    </div>
</div>
    <div class="navs" id="navs">
        <div id="nav-alls">
            <div class="nav-is">
                <div class="nav-imgs">
                    <img class="n-imgs" src="image/p1.png" width="194px"
                        height="145.5px" />
                </div>
                <div class="nav-names">
                </div>
            </div>
            <div class="nav-is">
                <div class="nav-imgs">
                    <img class="n-imgs" src="image/p2.png" width="194px"
                        height="145.5px" />
                </div>
                <div class="nav-names">
                </div>
            </div>
            <div class="nav-is">
                <div class="nav-imgs">
                    <img class="n-imgs" src="image/p3.png" width="194px"
                        height="145.5px" />
                </div>
                <div class="nav-names">
                </div>
            </div>
            <div class="nav-is">
                <div class="nav-imgs">
                    <img class="n-imgs" src="image/p4.png" width="194px"
                        height="145.5px" />
                </div>
                <div class="nav-names">
                </div>
            </div>
            <div class="nav-is">
                <div class="nav-imgs">
                    <img class="n-imgs" src="image/p1.png" width="194px"
                        height="145.5px" />
                </div>
                <div class="nav-names">
                </div>
            </div>
            <div class="nav-is">
                <div class="nav-imgs">
                    <img class="n-imgs" src="image/p1.png" width="194px"
                        height="145.5px" />
                </div>
                <div class="nav-names">
                </div>
            </div>
            <div class="nav-is">
                <div class="nav-imgs">
                    <img class="n-imgs" src="image/p1.png" width="194px"
                        height="145.5px" />
                </div>
                <div class="nav-names">
                </div>
            </div>
        </div>
    </div>
    <a class="last-nexts" id="lasts"> <span id="lefts"> < </span></a> <a
        class="last-nexts" id="nexts"> <span id="rights"> > </span></a>
</div>

这个那个jquery的拖动事件：

<script>
$(document).ready(function(){        
    $(function() {
        $(".nav-imgs").draggable({
            revert : 'invalid',//如果设置为 "invalid"，还原仅在 draggable 未放置在 droppable 上时发生
            opacity : 0.7,//不透明度
            helper : 'clone',//如果设置为 "clone"，元素将被克隆，且克隆将被拖拽
            scope : 'drop'//一个“default”与droppable带有相同的scope值的draggable会被该droppable接受
        });
        $(".div-rows-col").droppable({
            scope : 'drop',
            drop : function(event, ui) {
                var ud = ui.draggable;
                if (ud.draggable("option", "helper") == "clone") {
                    ud.clone().appendTo($(".div-rows-col")).css({
                        position : 'absolute',
                        left : ui.offset.left,
                        top : ui.offset.top
                    }).draggable({
                        scope : 'drop',
                        revert : 'invalid',
                        zIndex : '9999'
                    }).resizable();
                }
            },
            out : function(event, ui) {
                ui.draggable.remove();
            }
        });

    });

    $(function() {
        $(".ui-widget-conten").resizable();
    });

});
</script>
这是js的拖动图片四边四角事件：
<script type="text/javascript">
//可随意拖动、拖动四周进行放大缩小

var img = document.getElementsByClassName("imgsrc");
    for (var i = 0; i < img.length; i++) {
        (function(img) {
            var span = 10;
            var isDrag = null;
            var isIE = !!document.all;
            var zIndex=1;
            var ox, oy, ex, ey, ow, oh, chrPosX = false, chrPosY = false;
            var percent = img.offsetHeight / img.offsetWidth;
            function mouseMove(e) {
                e = e || event;
                var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY,imgW=img.offsetWidth,imgH=img.offsetHeight;  
                   if((x<=span&&y<=span)||(x>=imgW-span&&y>=imgH-span))img.className='cnwr';  
                   else if((x<=span&&y>=imgH-span)||(y<=span&&x>=imgW-span))img.className='cner';  
                   else if(x<=span||x>=imgW-span)img.className='chr';  
                   else if(y<=span||y>=imgH-span)img.className='cvr';  
                   else img.className='cdft';
            }
            function mouseDown(e) {
                e = e || event;
                ex = e.clientX;//保存当前鼠标X轴的坐标  
                ey = e.clientY;//保存当前鼠标y轴的坐标  
                ox = parseInt(img.style.left);
                oy = parseFloat(img.style.top);
                img.style.zIndex=zIndex++;
                if (img.className == 'cdft') {
                    isDrag = true;
                    img.className = 'cmove';
                } else {
                    isDrag = false;
                    oh = img.offsetHeight;//获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  
                    ow = img.offsetWidth;
                    var x = e.offsetX || e.layerX, y = e.offsetY
                            || e.layerY;//相对容器的水平坐标,相对容器的垂直坐标  
                    chrPosX = x <= span;
                    chrPosY = y <= span;
                    if (e.ctrlKey) {//事件属性可返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住  
                        ow = oh/percent; // 根据比例计算出宽度
                        img.style.width = ow;//更新图片宽度  
                        img.style.zIndex=zIndex++;
                    }
                }
                if (isIE)
                    img.setCapture();
                document.onmousemove = mouseDownAndMove;
                img.onmousemove = null;
                document.onmouseup = function() {
                    if (typeof isDrag == "boolean") {
                        if (isIE)
                            img.releaseCapture();//函数的作用就是将后续的mouse事件都发送给这个对象  
                    }
                    isDrag = null;
                    img.className = 'cdft';
                    img.onmousemove = mouseMove;
                    document.onmousemove = null;
                }
                return false;
            }
            function mouseDownAndMove(e) {
                e = e || event;
                if (isDrag === true) {
                    img.style.left = ox + e.clientX - ex + 'px';
                    img.style.top = oy + e.clientY - ey + 'px';
                } else if (isDrag === false) {
                    var x = e.clientX - ex, y = e.clientY - ey;
                    switch (img.className) {
                    case 'chr':
                        x = chrPosX ? -x : x;
                        y = e.ctrlKey ? percent * x + oh : oh;
                        img.style.width = ow + x + 'px';
                        img.style.height = y + 'px';
                        if (chrPosX)
                            img.style.left = ox - x + 'px';
                        break;
                    case 'cvr':
                        y = chrPosY ? -y : y;
                        x = e.ctrlKey ? y / percent + ow : ow;
                        img.style.width = x + 'px';
                        img.style.height = oh + y + 'px';
                        if (chrPosY)
                            img.style.top = oy - y + 'px';
                        break;
                    case 'cnwr':
                    case 'cner':
                        x = chrPosX ? -x : x;
                        if (e.ctrlKey) {//按宽等比  
                            y = e.ctrlKey ? percent * x + oh : oh;
                            img.style.width = ow + x + 'px';
                            img.style.height = y + 'px';
                            if (chrPosX)
                                img.style.left = ox - x + 'px';
                        } else {
                            y = chrPosY ? -y : y;
                            img.style.width = ow + x + 'px';
                            img.style.height = oh + y + 'px';
                            if (chrPosX)
                                img.style.left = ox - x + 'px';
                            if (chrPosY)
                                img.style.top = oy - y + 'px';
                        }
                        break;
                    }
                }
            }
            img.onmousemove = mouseMove;
            img.onmousedown = mouseDown;
            img.style.zIndex=zIndex++;
        })(img[i]);
    }

</script>

你期待的结果是什么？实际看到的错误信息又是什么？

两个整合起来就是因为不大会，所以想请教一些大佬，帮忙解决解决