jQuery如何实现拖拽可编辑模块功能

小编给大家分享一下jQuery如何实现拖拽可编辑模块功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联专注于网站建设,为客户提供成都做网站、网站制作、成都外贸网站建设、网页设计开发服务,多年建网站服务经验,各类网站都可以开发,高端网站设计,公司官网,公司展示网站,网站设计,建网站费用,建网站多少钱,价格优惠,收费合理。

先给大家展示下效果图:

jQuery如何实现拖拽可编辑模块功能

jQuery如何实现拖拽可编辑模块功能

jQuery如何实现拖拽可编辑模块功能

具体实现代码如下所示:

index.html




  
  iNettuts - Welcome!
  


 
  

iNettuts

 
                   

简介窗口

    
          

如果你活着,早晚都会死;如果你死了,你就永远活着。

    
                   

窗口标题

    
          

世界上本没有路,有了腿便有了路。

                              

窗口标题

               

一个人只能全力以赴,等待命运去揭晓答案。

                        

窗口标题

               

望着沧茫大海,令我得到片刻解脱;不怀缅过去,也不展望未来。

                              

窗口标题

               

就像这些樱花,每个生命都会凋零。每吸一口气,每喝一杯茶,每杀一个人都能体悟人生,这就是武士精神。

                        

窗口标题

               

人应竭尽所能,然后听天由命。

                   

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,
    removable: 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 参数。
  //如果我们希望在一个 .column类属性 的对象中 中搜索一个.widget类属性的 元素,可以限定下面的搜索:
  $(settings.widgetSelector, $(settings.columns)).each(function () {
   //遍历匹配的结果
   var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
   //移除窗体元素
   if (thisWidgetSettings.removable) {
    $('CLOSE').mousedown(function (e) {
     //阻止事件冒泡
     e.stopPropagation(); 
    }).click(function () {
     if(confirm('这个小部件将被删除,确定吗?')) {
      $(this).parents(settings.widgetSelector).animate({
       opacity: 0 
      },function () {
       $(this).wrap('
').parent().slideUp(function () {         //删除         //remove() 方法移除被选元素,包括所有文本和子节点。          //该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。         $(this).remove();        });       });      }      return false;     }).appendTo($(settings.handleSelector, this));    }    //编辑窗体元素    if (thisWidgetSettings.editable) {     $('EDIT').mousedown(function (e) {      e.stopPropagation();      }).toggle(function () {      $(this).css({backgroundPosition: '-66px 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));     $('')      .append('
    ')      .append((function(){       var colorList = '';       $(thisWidgetSettings.colorClasses).each(function () {        colorList += '';       });       return colorList + '
';      })())      .append('')      .insertAfter($(settings.handleSelector,this));    }    //折叠    if (thisWidgetSettings.collapsible) {     $('COLLAPSE').mousedown(function (e) {      e.stopPropagation();      }).toggle(function () {      $(this).css({backgroundPosition: '-38px 0'})       .parents(settings.widgetSelector)        .find(settings.contentSelector).hide();      return false;     },function () {      $(this).css({backgroundPosition: '-52px 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('h4').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 $('').appendTo('head');  },  //排序窗体布局  makeSortable : function () {   var iNettuts = this,    $ = this.jQuery,    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,h2,h3,h4,h5,h6,h7,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 h4,
.color-white h4,
.color-green h4
 {color:#000;}
.color-red h4,
.color-blue h4,
.color-orange h4
 {color:#FFF;}
/* End Colors */
/* Head section */
#head {
 background: #fff url(img/head-bg.png) repeat-x;
 height: 100px;
}
#head h2 {
 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 h4 {
 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;
}

以上是“jQuery如何实现拖拽可编辑模块功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享文章:jQuery如何实现拖拽可编辑模块功能
当前链接:http://scyanting.com/article/jedjpj.html