生成拖曳指定div的脚本

最新推荐文章于 2024-09-14 18:52:56 发布

丁亚涛

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量88

点赞数

文章标签： javascript c#

本文链接：https://blog.csdn.net/myyataoo/article/details/124002736

版权

前端开发 div拖曳 JavaScript 动态内容事件处理

关键词由CSDN通过智能技术生成

前端开发时，经常需要弹出一个div，div内容动态获取，同时我们需要这个div层可以有鼠标拖曳的效果，可以用下面的代码来实现：

protected string create_drag_script(string c_class_name = "container", string c_div_id = "div_pop")
    {
        string c_script = "<script type='text/javascript'>";
        c_script += "function set_div_drag(){";
        c_script += "var div_e_x = 0;var div_e_y = 0;var div_left = 0;var div_top = 0; var div_move = false; var div_width, div_height;";

        c_script += "$('." + c_class_name + "').click(function () { }).mousedown(function (e) {";
        c_script += "div_e_x = e.clientX;div_e_y = e.clientY;";
        c_script += "div_left = parseInt($('." + c_class_name + "').css('left'));";
        c_script += "div_top = parseInt($('." + c_class_name + "').css('top'));";
        c_script += "div_width = parseInt($('." + c_class_name + "').css('width'));";
        c_script += "if (div_e_y < div_top + 30 && div_e_y > div_top) div_move = true;else div_move = false;";
        c_script += "});";

        c_script += "$('." + c_class_name + "').mouseout(function () {";
        c_script += " $('." + c_class_name + "').css('cursor', 'default');";
        c_script += "});";

        c_script += "$(window).mousemove(function (e) {";
        c_script += "var div_nx = e.clientX;var div_ny = e.clientY;var div_nl = div_nx - (div_e_x - div_left);var div_nt = div_ny - (div_e_y - div_top);";
        c_script += "if (div_move == false) {";
        c_script += " div_left = parseInt($('." + c_class_name + "').css('left'));";
        c_script += " div_top = parseInt($('." + c_class_name + "').css('top'));";
        c_script += " div_width = parseInt($('." + c_class_name + "').css('width'));";
        c_script += " if (div_ny < div_top + 30 && div_ny > div_top && div_nx < div_left + div_width && div_nx > div_left + div_width - 30) {";
        c_script += "  $('." + c_class_name + "').css('cursor', 'pointer');";
        c_script += "  }else{";
        c_script += "  $('." + c_class_name + "').css('cursor', 'default');}";
        c_script += " return;";
        c_script += "}";
        c_script += "$('." + c_class_name + "').css('cursor', 'move');";
        c_script += "$('." + c_class_name + "').css('left', div_nl + 'px');";
        c_script += "$('." + c_class_name + "').css('top', div_nt + 'px');";
        c_script += "});";

        c_script += "$(window).mouseup(function () { ";
        c_script += " div_move = false;";
        c_script += " $('." + c_class_name + "').css('cursor', 'default');";
        c_script += " });";
        c_script += "}";
        c_script += "function hide_div(divname) {$('#' + divname).fadeOut(400);$('#' + divname).remove();}";
        c_script += "function set_div_middle(divname) {";
        c_script += " var windowW = $(window).width();var windowH = $(window).height();";
        c_script += " var o1 = document.getElementById(divname);var w1 = (windowW - $(o1).width()) / 2;var h1 = (windowH - $(o1).height()) / 2;";
        c_script += " $(o1).css('top', '50px');$(o1).css('left', w1);";
        c_script += " return true;";
        c_script += "}";
        c_script += "</script>";
        return c_script;
    }