首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现拖拽可编辑模块功能代码

Posted in Javascript onJanuary 12, 2017

在没给大家分享实现代码之前，先给大家展示下效果图：

jQuery实现拖拽可编辑模块功能代码

jQuery实现拖拽可编辑模块功能代码

jQuery实现拖拽可编辑模块功能代码

具体实现代码如下所示：

index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <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>一个人只能全力以赴，等待命运去揭晓答案。</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>就像这些樱花，每个生命都会凋零。每吸一口气，每喝一杯茶，每杀一个人都能体悟人生，这就是武士精神。</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-1.3.2.min.js"></script>
 <script type="text/javascript" src="jquery-ui-1.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,
    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) {
    $('<a href="#" class="remove">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="#" class="edit">EDIT</a>').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));
    $('<div class="edit-box" style="display:none;"/>')
     .append('<ul><li class="item"><label>改变标题吗?</label><input value="' + $('h3',this).text() + '"/></li>')
     .append((function(){
      var colorList = '<li class="item"><label>可用的颜色:</label><ul class="colors">';
      $(thisWidgetSettings.colorClasses).each(function () {
       colorList += '<li class="' + this + '"/>';
      });
      return colorList + '</ul>';
     })())
     .append('</ul>')
     .insertAfter($(settings.handleSelector,this));
   }
   //折叠
   if (thisWidgetSettings.collapsible) {
    $('<a href="#" class="collapse">COLLAPSE</a>').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('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,
   $ = 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,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;
}

jQuery实现拖拽可编辑模块功能代码

- Author -

逆世风灵

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
学习Node.js模块机制
Oct 17 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 #Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 #Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 #Javascript
JS百度地图搜索悬浮窗功能
Jan 12 #Javascript
原生js实现焦点轮播图效果
Jan 12 #Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 #Javascript
vuejs父子组件通信的问题
Jan 11 #Javascript
frg-100(1) 根德5570(1) DE1103(2) 239军机(1) BCLer(1) YAESU(1) ICF-903L(1) 74HC4066(1) YB-230(1) AN-LP1(1)
You might like
组合算法的PHP解答方法
2012/02/04 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑；B叔为挣牛排半夜整理情报
2014/07/13 DOTA
python中MethodType方法介绍与使用示例
2017/08/03 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
澳大利亚药房在线：ThePharmacy
2017/10/04 全球购物
加拿大在线眼镜零售商：SmartBuyGlasses加拿大
2019/05/25 全球购物
高级运动鞋：GREATS
2019/07/19 全球购物
求职简历自荐信
2013/10/20 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
诚信承诺书
2015/01/19 职场文书
干货干货！2019最新优秀创业计划书
2019/03/21 职场文书
Django drf请求模块源码解析
2021/06/08 Python
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
Python pyecharts绘制条形图详解
2022/04/02 Python
宝塔更新Python及Flask项目的部署
2022/04/11 Python