jQ实现拖拽区块功能

-

绑定区块需使用position属性。

-

<!-- start-div -->
<div class="view-div">

    <!--弹出框-->
    <div class="dialog" minheight="320" minwidth="660">
        <div class="dlg_top"></div>

        <div class="dlg_content">
            <label style="display:inline-block; margin:10px;line-height:26px;">稻盛和夫，1932年出生于日本鹿儿岛，鹿儿岛大学工学部毕业。27岁创办京都陶瓷株式会社（现名京瓷Kyocera），52岁创办第二电信（原名DDI，现名KDDI，目前在日本为仅次于NTT的第二大通讯公司），这两家公司又都在他的有生之年进入世界500强，两大事业皆以惊人的力道成长。 稻盛和夫的释义是涵盖了生活态度、哲学、思想、伦理观等因素人格。痛惜战后的日本以选择聪明才辩型的人做领导为潮流，忽略了道德规范和伦理标准，导致政界、商界丑闻频发。他建议领导者的选拔标准是德要高于才，也就是居人上者，人格第一，勇气第二，能力第三。他指出热爱是点燃工作激情的火把。无论什么工作，只要全力以赴去做就能产生很大的成就感和自信心，而且会产生向下一个目标挑战的积极性。成功的人往往都是那些沉醉于所做事的人。</label>
        </div>

    </div>



    <script>

        // 拖拽绑定
        var drag_nav_class = "dlg_top"; // 拖拽手柄
        $(".dialog").bind("mousedown", moveHandler); // 拖拽区域绑定

        // 拖拽移动
        function moveHandler(evt) {
            var $trgt = $(event.target);
            if (!$trgt.hasClass(drag_nav_class)) return;

            var $this = $(this);
            var el = $this[0];
            var oevent = evt || event;
            var distanceX = oevent.clientX - el.offsetLeft;
            var distanceY = oevent.clientY - el.offsetTop;
            $(document).bind("mousemove", function (evt) {
                var oevent = evt || event;
                el.style.left = oevent.clientX - distanceX + 'px';
                el.style.top = oevent.clientY - distanceY + 'px';
            });
            $(document).bind("mouseup", function () {
                $(document).unbind("mousemove");
                $(document).unbind("mouseup");
            });
        }

    </script>

    <style>

        .dialog {
            width: 50%;
            position: absolute;
            top: 10%;
            left: 20%;
            z-index: 2;
            background: white;
            border-radius: 3px;
            border: 1px solid #eec;
        }
        .dlg_top {
            position: relative;
            height: 28px;
            z-index: 3;
            background: #f3f3f3;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border-bottom: 1px solid #eec;
            cursor: move;
        }
        .dlg_content {
            position: relative;
            min-height: 300px;
            overflow-y: auto;
            margin-right: 4px;
        }

    </style>


</div>
<!-- end-div -->

-

参考：https://blog.csdn.net/water_0815/article/details/80100958

---------------------------------------------------------

封装后的完整代码：

直接调用open_phone_window("http://www.baidu.com", "view-div") 即可完成打开可拖拽的手机窗口。

/*
* 手机窗口预览操作
* */
var phone_left = 30;
var phone_top = 80;
var phone_num = 0;
var phone_win_num = 0;
/*
*   示例调用open_phone_window("http://www.baidu.com", "view-div")
* */
function open_phone_window(src, append_class){

    var el = "";

    if (!src){
        alert_txt("未指定iframe内的网址", 2000);
        src = "http://3g.163.com/touch/all#/";
    }else {
        src = src+"&preview=yes";
    }
    if (!append_class){
        el = $("body");
    }else {
        el = $("."+append_class);
    }

    $(".dis-box").html("");

    if ($(".dialog").length >= 4){
        $(".dialog").remove();
        phone_left = 30;
        phone_top = 80;
        phone_num = 0;
        alert_txt("请不要打开太多窗口！", 3000);
        return;
    }

    if (phone_num >= 4){
        phone_left = 30+phone_num;
        phone_top = 80+phone_num;
        phone_num = 0;
    }

    if (phone_win_num >= 40) {
        phone_win_num = 0;
    }

    console_log([phone_num, phone_left, phone_top]);

    var style = '<style>.dialog{position:fixed;top:100px;left:50px;z-index:2;background:white;border-radius:3px;outline:1px solid blueviolet;box-shadow:0 0 10px blueviolet;}.dlg_top{position:relative;height:36px;z-index:3;background:white;border-bottom:1px solid blueviolet;cursor:move;}.dlg_content{position:relative;min-height:300px;overflow-y:auto;margin-right:4px;}.window-style{width:375px;height:631px;zoom:0.8;}.window-iframe-style{width:375px;height:587px;border:none;outline:none;background:rgba(255,255,255,1);overflow:hidden;}.do-window-style{background:white;height:44px;border-top:1px solid blueviolet;margin-top:-5px;}.refresh-window-btn-style{padding:10px 8px;font-size:16px;cursor:pointer;}.close-window-btn-style{padding:6px 8px;font-size:16px;cursor:pointer;color:red;float:right;text-shadow:0 0 3px blueviolet;}.close-window-btn:hover{opacity:0.8;}.close-window-btn:active{opacity:0.6;}.zoom-btn-style{padding:12px 8px;font-size:14px;float:left;cursor:pointer;}.zoom-btn-style-active{color:blueviolet;}.zoom-btn-style:hover{opacity:0.8;}.zoom-btn-style:active{opacity:0.6;}</style>';

    var div = '<div class="iphone-8-window window-style">' +
        '    <iframe class="window-iframe window-iframe-style" src="'+src+'"></iframe>' +
        '    <div class="do-window-style select-none">' +
        '        <span class="zoom-btn-style zoom-btn" data-zoom="0.6">x0.6</span>' +
        '        <span class="zoom-btn-style zoom-btn zoom-btn-style-active" data-zoom="0.8" >x0.8</span>' +
        '        <span class="zoom-btn-style zoom-btn" data-zoom="1.0">x1.0</span>' +
        '        <span class="zoom-btn-style zoom-btn" data-zoom="1.2">x1.2</span>' +
        '        <span class="refresh-window-btn-style refresh-btn float-right" data-src="'+src+'">刷新窗口</span>' +
        '        <div class="clear"></div>' +
        '    </div>' +
        '</div>';

    var script = '<script>' +
        '   var drag_nav_class = "dlg_top";' +
        '   $(".dialog").bind("mousedown", moveHandler);' +
        '</script>';

    var box = '<div class="dialog" style="left: '+phone_left+'px;top: '+phone_top+'px;">' +
        '   <div class="dlg_top select-none">' +
        '       <span class="close-window-btn-style close-window-btn">X&nbsp;&nbsp;</span>' +
        '       <div class="clear"></div>' +
        '   </div>' +
            div + script + style +
        '</div>';

    el.append(box);

    phone_left += 20;
    phone_top +=20;
    phone_num += 1;
    phone_win_num += 2;

}
$(document).on("click", ".zoom-btn", function () {
    var that = $(this);
    var zoom = that.data("zoom");
    that.parent("div").parent("div").css({"zoom": zoom});
    that.addClass("zoom-btn-style-active").siblings().removeClass("zoom-btn-style-active");
});
$(document).on("click", ".close-window-btn", function () {
    var that = $(this);

    that.parent("div").parent("div").remove();
});
$(document).on("click", ".refresh-btn", function () {
    var that = $(this);
    var src = that.data("src");

    that.parent("div").parent("div").find(".window-iframe").attr("src", src);
});

// 拖拽移动
function moveHandler(evt) {
    var $trgt = $(event.target);
    if (!$trgt.hasClass(drag_nav_class)) return;

    var $this = $(this);
    var el = $this[0];
    var oevent = evt || event;
    var distanceX = oevent.clientX - el.offsetLeft;
    var distanceY = oevent.clientY - el.offsetTop;
    $(document).bind("mousemove", function (evt) {
        var oevent = evt || event;
        el.style.left = oevent.clientX - distanceX + 'px';
        el.style.top = oevent.clientY - distanceY + 'px';
    });
    $(document).bind("mouseup", function () {
        $(document).unbind("mousemove");
        $(document).unbind("mouseup");
    });
}

-

-