编写一个可拖动div标题的jquery插件效果代码-html代码-BFW代码库

编写一个可拖动div标题的jquery插件效果代码

代码语言：html

所属分类：拖放

代码描述：编写一个可拖动div标题的jquery插件效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>拖动DIV</title> 
<style type="text/css"> 
.wrapper{
    width: 100%;
    height :100%;
    background-color: lightgreen;
}
.windows{
    width: 300px;
    height: 200px;
    background-color: #ccc;
    position: absolute;
    
    margin: 0;
    padding: 0;
    background-color: #fff;

    border-radius: 2px;
    box-shadow: 1px 1px 50px rgba(0,0,0,.3);

}
.title{
   padding: 0 80px 0 20px;
    height: 42px;
    line-height: 42px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    background-color: #F8F8F8;
    border-radius: 2px 2px 0 0;
}
.content{
    padding: 50px 100px;
}

</style> 
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

<script>
    (function($) {
    $.fn.dragDiv = function(options) {
        return this.each(function() {
            var _moveDiv = $(this).parent();//需要拖动的Div
            var _moveArea = options ? $(options) : $(document);//限定拖动区域，默认为整个文档内
            var isDown = false;//mousedown标记
            
           
            //ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
            if(document.attachEvent){
                _moveDiv[0].attachEvent('onselectstart', function() {
                    return false;
                });
            }
            $(this).mousedown(function(event) {            
                var e = eve.........完整代码请登录后点击上方下载按钮下载查看