首页
所有分类
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 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
5个书写JavaScript代码的坏习惯，看看你中枪了没？
Nov 06 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 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
磁盘管理(1) 目录管理(1) 日志(1) Post(1) Get(1) 二维码(2) 太阳码(1) 条码(1) 延时任务(1) Word(2)
You might like
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
微信小程序自定义导航栏（模板化）
2019/11/15 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python自动格式化json文件的方法
2015/03/11 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
python图书管理系统
2020/04/05 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Python语法分析之字符串格式化
2019/06/13 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
美国殿堂级滑板、冲浪、滑雪服装品牌：Volcom（钻石）
2017/04/20 全球购物
国际政治个人自荐信范文
2013/11/26 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
日化店促销方案
2014/03/26 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书