Jquery实现拖拽可编辑模块_html-js-css

概述上天给予你天赋，是因为你有不可推卸的责任和使命。index.html&lt!DOCTYPE html&gt&lthtml&gt&lthead&gt &ltmeta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt &lttit 上天给予你天赋，是由于你有不可推辞的责任和使命。index.HTML

<!DOCTYPE HTML><HTML><head>        <Meta http-equiv="Content-Type" content="text/HTML; charset=UTF⑻" />        <Title>iNettuts - Welcome!</Title>        <link href="inettuts.CSS" rel="stylesheet" type="text/CSS" /></head><body>    <div ID="head">        <h1>iNettuts</h1>    </div>    <div ID="columns">        <ul ID="column1" class="column">            <li class="Widget color-green" ID="intro">                <div class="Widget-head">                    <h3>简介窗口</h3>                </div>                <div class="Widget-content">                    <p>如果你活着，早晚都会死；如果你死了，你就永久活着。</p>                </div>            </li>            <li class="Widget color-red">                  <div class="Widget-head">                    <h3>窗口标题</h3>                </div>                <div class="Widget-content">                    <p>世界上本没有路，有了腿便有了路。</p>                </div>            </li>        </ul>        <ul ID="column2" class="column">            <li class="Widget color-blue">                  <div class="Widget-head">                    <h3>窗口标题</h3>                </div>                <div class="Widget-content">                    <p>1个人只能全力以赴，等待命运去揭晓答案。</p>                </div>            </li>            <li class="Widget color-yellow" ID="dingzh">                  <div class="Widget-head">                    <h3>窗口标题</h3>                </div>                <div class="Widget-content">                    <p>望着沧茫大海,令我得到片刻摆脱;不怀缅过去,也不展望未来。</p>                </div>            </li>        </ul>        <ul ID="column3" class="column">            <li class="Widget color-orange">                  <div class="Widget-head">                    <h3>窗口标题</h3>                </div>                <div class="Widget-content">                    <p>就像这些樱花，每一个生命都会凋零。每吸1口气，每喝1杯茶，每杀1个人都能体悟人生，这就是武士精神。</p>                </div>            </li>            <li class="Widget color-white">                  <div class="Widget-head">                    <h3>窗口标题</h3>                </div>                <div class="Widget-content">                    <p>人应竭尽所能，然后听天由命。</p>                </div>            </li>        </ul>    </div>    <script type="text/JavaScript" src="jquery⑴.3.2.min.Js"></script>    <script type="text/JavaScript" src="jquery-ui⑴.7.2.custom.min.Js"></script>    <script type="text/JavaScript" src="inettuts.Js"></script></body></HTML>

inettuts.Js

var iNettuts = {    jquery : $,settings : {        columns : '.column',WidgetSelector: '.Widget',handleSelector: '.Widget-head',contentSelector: '.Widget-content',WidgetDefault : {            movable: true,removable: true,collapsible: true,editable: true,colorClasses : ['color-yellow','color-red','color-blue','color-white','color-orange','color-green']        },WidgetIndivIDual : {            //个别的模块            intro : {                movable: false,removable: false,collapsible: false,editable: false            },dingzh : {                movable: false,collapsible: true            }        }    },//初始化    init : function () {        this.attachStylesheet('inettuts.Js.CSS');        this.addWidgetControls();        this.makeSortable();    },getWidgetSettings : function (ID) {        var $ = this.jquery,settings = this.settings;            //判断ID模块是不是定义过        return (ID&&settings.WidgetIndivIDual[ID]) ? $.extend({},settings.WidgetDefault,settings.WidgetIndivIDual[ID]) : settings.WidgetDefault;    },//动态追加元素    addWidgetControls : function () {        var iNettuts = this,$ = this.jquery,settings = this.settings;        //设置选择器环境        //默许情况下，选择器从文档根部对 DOM 进行搜索。不过，可以为 $() 设置可选的 context 参数。        //如果我们希望在1个 .column类属性 的对象中 中搜索1个.Widget类属性的 元素，可以限定下面的搜索：        $(settings.WidgetSelector,$(settings.columns)).each(function () {            //遍历匹配的结果            var thisWidgetSettings = iNettuts.getWidgetSettings(this.ID);            //移除窗体元素            if (thisWidgetSettings.removable) {                $('<a href="#" >CLOSE</a>').mousedown(function (e) {                    //禁止事件冒泡                    e.stopPropagation();                    }).click(function () {                    if(confirm('这个小部件将被删除，肯定吗?')) {                        $(this).parents(settings.WidgetSelector).animate({                            opacity: 0                            },function () {                            $(this).wrap('<div/>').parent().slIDeUp(function () {                                //删除                                //remove() 方法移除被选元素，包括所有文本和子节点。                                 //该方法不会把匹配的元素从 jquery 对象中删除，因此可以在将来再使用这些匹配的元素。                                $(this).remove();                            });                        });                    }                    return false;                }).appendTo($(settings.handleSelector,this));            }            //编辑窗体元素            if (thisWidgetSettings.editable) {                $('<a href="#" >EDIT</a>').mousedown(function (e) {                    e.stopPropagation();                    }).toggle(function () {                    $(this).CSS({backgroundposition: '⑹6px 0',wIDth: '55px'})                        .parents(settings.WidgetSelector)                            .find('.edit-Box').show().find('input').focus();                    return false;                },function () {                    $(this).CSS({backgroundposition: '',wIDth: ''})                        .parents(settings.WidgetSelector)                            .find('.edit-Box').hIDe();                    return false;                }).appendTo($(settings.handleSelector,this));                $('<div  />')                    .append('<ul><li ><label>改变标题吗?</label><input value="' + $('h3',this).text() + '"/></li>')                    .append((function(){                        var colorList = '<li ><label>可用的色彩:</label><ul >';                        $(thisWidgetSettings.colorClasses).each(function () {                            colorList += '<li hljs-keyword">this + '"/>';                        });                        return colorList + '</ul>';                    })())                    .append('</ul>')                    .insertAfter($(settings.handleSelector,this));            }            //折叠            if (thisWidgetSettings.collapsible) {                $('<a href="#" >ColLAPSE</a>').mousedown(function (e) {                    e.stopPropagation();                    }).toggle(function () {                    $(this).CSS({backgroundposition: '⑶8px 0'})                        .parents(settings.WidgetSelector)                            .find(settings.contentSelector).hIDe();                    return false;                },function () {                    $(this).CSS({backgroundposition: '⑸2px 0'})                        .parents(settings.WidgetSelector)                            .find(settings.contentSelector).show();                    return false;                }).prependTo($(settings.handleSelector,this));            }        });        $('.edit-Box').each(function () {            $('input',this).keyup(function () {                $(this).parents(settings.WidgetSelector).find('h3').text( $(this).val().length>20 ? $(this).val().substr(0,20)+'...' : $(this).val() );            });            $('ul.colors li',this).click(function () {                var colorStylePattern = /\bcolor-[\w]{1,}\b/,thisWidgetcolorClass = $(this).parents(settings.WidgetSelector).attr('class').match(colorStylePattern)                if (thisWidgetcolorClass) {                    $(this).parents(settings.WidgetSelector)                        .removeClass(thisWidgetcolorClass[0])                        .addClass($(this).attr('class').match(colorStylePattern)[0]);                }                return false;            });        });    },attachStylesheet : function (href) {        var $ = this.jquery;        return $('<link href="' + href + '" rel="stylesheet" type="text/CSS" />').appendTo('head');    },//排序窗体布局    makeSortable : function () {        var iNettuts = this,settings = this.settings,$sortableItems = (function () {                var notSortable = '';                $(settings.WidgetSelector,$(settings.columns)).each(function (i) {                     //判断是不是具有可移动属性                    if (!iNettuts.getWidgetSettings(this.ID).movable) {                        if(!this.ID) {                            this.ID = 'Widget-no-ID-' + i;                        }                        notSortable += '#' + this.ID + ',';                    }                });                return $('> li:not(' + notSortable + ')',settings.columns);            })();        $sortableItems.find(settings.handleSelector).CSS({            cursor: 'move'        }).mousedown(function (e) {            $sortableItems.CSS({wIDth:''});            $(this).parent().CSS({                wIDth: $(this).parent().wIDth() + 'px'            });        }).mouseup(function () {            if(!$(this).parent().hasClass('dragging')) {                $(this).parent().CSS({wIDth:''});            } else {                $(settings.columns).sortable('disable');            }        });        $(settings.columns).sortable({            items: $sortableItems,connectWith: $(settings.columns),handle: settings.handleSelector,placeholder: 'Widget-placeholder',forcePlaceholderSize: true,revert: 300,delay: 100,opacity: 0.8,containment: 'document',start: function (e,ui) {                $(ui.helper).addClass('dragging');            },stop: function (e,ui) {                $(ui.item).CSS({wIDth:''}).removeClass('dragging');                $(settings.columns).sortable('enable');            }        });    }};iNettuts.init();

inettuts.CSS

/* reset */body,img,p,h1,h2,h3,h4,h5,h6,ul,ol {margin:0; padding:0; List-style:none; border:none;}/* End reset */body {Font-size:0.8em; Font-family:Arial,Verdana,sans-serif; background: #fff;}a {color:white;}/* colors */.color-yellow {background:#f2bc00;}.color-red    {background:#dd0000;}.color-blue   {background:#148ea4;}.color-white  {background:#dfdfdf;}.color-orange {background:#f66e00;}.color-green  {background:#8dc100;}.color-yellow h3,.color-white h3,.color-green h3    {color:#000;}.color-red h3,.color-blue h3,.color-orange h3    {color:#FFF;}/* End colors *//* head section */#head {    background: #fff url(img/head-bg.png) repeat-x;    height: 100px;}#head h1 {    line-height: 100px;    color: #FFF;    text-align: center;    background: url(img/inettuts.png) no-repeat center;    text-indent: -9999em}/* End head Section *//* Columns section */#columns .column {    float: left;    wIDth: 33.3%;        /* min-height: */        min-height: 400px;        height: auto !important;         height: 400px;}#columns .column-dingzh {    float: left;    wIDth: 33.3%;        /* min-height: */        min-height: 400px;        height: auto !important;         height: 400px;}/* Column divIDers (background-images) : */    #columns #column1 { background: url(img/column-bg-left.png) no-repeat right top; }    #columns #column3 { background: url(img/column-bg-right.png) no-repeat left top; }#columns #column1 .Widget { margin: 30px 35px 0 25px; }#columns #column3 .Widget { margin: 30px 25px 0 35px; }#columns .Widget {    margin: 30px 20px 0 20px;    padding: 2px;    -moz-border-radius: 4px;    -webkit-border-radius: 4px;}#columns .Widget .Widget-head {    color: #fff;    overflow: hIDden;    wIDth: 100%;    height: 30px;    line-height: 30px;}#columns .Widget .Widget-head h3 {    padding: 0 5px;    float: left;}#columns .Widget .Widget-content {    background: #333 url(img/Widget-content-bg.png) repeat-x;    padding: 0 5px;    color: #DDD;    -moz-border-radius-bottomleft: 2px;    -moz-border-radius-bottomright: 2px;    -webkit-border-bottom-left-radius: 2px;    -webkit-border-bottom-right-radius: 2px;    line-height: 1.2em;    overflow: hIDden;}#columns .Widget .Widget-content p {    padding: 0.8em 0;    border-bottom: 1px solID #666;}#columns .Widget .Widget-content img {    float: right;    margin: 10px;    border: 1px solID #FFF;}#columns .Widget .Widget-content pre {    padding: 0.5em 5px;    color: #EEE;    Font-size: 12px;}#columns .Widget .Widget-content ul {    padding: 5px 0 5px 20px;    List-style: disc;}#columns .Widget .Widget-content ul li {padding: 3px 0;}#columns .Widget .Widget-content ul.images {    padding: 7px 0 0 0;    List-style: none;    height: 1%;}#columns .Widget .Widget-content ul.images li {    display: inline;    float: left;}#columns .Widget .Widget-content ul.images img {    display: inline;    float: left;    margin: 0 0 7px 7px;}/* End Columns section */

inettuts.Js.CSS

/* Js-Enabled CSS */.Widget-head a.remove  {    float: right;    display: inline;    background: url(img/buttons.gif) no-repeat -24px 0;    wIDth: 14px;    height: 14px;    margin: 8px 4px 8px 0;    text-indent: -9999em;    outline: none;}.Widget-head a.edit  {    float: right;    display: inline;    background: url(img/buttons.gif) no-repeat;    wIDth: 24px;    height: 14px;    text-indent: -9999em;    margin: 8px 4px 8px 4px;    outline: none;}.Widget-head a.collapse  {    float: left;    display: inline;    background: url(img/buttons.gif) no-repeat -52px 0;    wIDth: 14px;    height: 14px;    text-indent: -9999em;    margin: 8px 0 8px 4px;    outline: none;}.Widget-placeholder { border: 2px dashed #999;}#column1 .Widget-placeholder { margin: 30px 35px 0 25px; }#column2 .Widget-placeholder { margin: 30px 20px 0 20px; }#column3 .Widget-placeholder { margin: 30px 25px 0 35px; }.edit-Box {    overflow: hIDden;    background: #333 url(img/Widget-content-bg.png) repeat-x;    margin-bottom: 2px;    padding: 10px 0;}.edit-Box li.item {    padding: 10px 0;    overflow: hIDden;    float: left;    wIDth: 100%;    clear: both;}.edit-Box label {    float: left;    wIDth: 30%;    color: #FFF;    padding: 0 0 0 10px;}.edit-Box ul.colors li {    wIDth: 20px;    height: 20px;    border: 1px solID #EEE;    float: left;    display: inline;    margin: 0 5px 0 0;    cursor: pointer;}