广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >jQuery如何实现拖拽可编辑模块功能
  • 506

0
分享到

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

2024-04-02 19:04:59 506人浏览 泡泡鱼
摘要

小编给大家分享一下Jquery如何实现拖拽可编辑模块功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！先给大家展示下效果图：具体

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

先给大家展示下效果图：

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">
  <h2>iNettuts</h2>
 </div>
 <div id="columns">
  <ul id="column1" class="column">
   <li class="widget color-green" id="intro">
    <div class="widget-head">
     <h4>简介窗口</h4>
    </div>
    <div class="widget-content">
     <p>如果你活着，早晚都会死；如果你死了，你就永远活着。</p>
    </div>
   </li>
   <li class="widget color-red"> 
    <div class="widget-head">
     <h4>窗口标题</h4>
    </div>
    <div class="widget-content">
     <p>世界上本没有路，有了腿便有了路。</p>
    </div>
   </li>
  </ul>
  <ul id="column2" class="column">
   <li class="widget color-blue"> 
    <div class="widget-head">
     <h4>窗口标题</h4>
    </div>
    <div class="widget-content">
     <p>一个人只能全力以赴，等待命运去揭晓答案。</p>
    </div>
   </li>
   <li class="widget color-yellow" id="dingzh"> 
    <div class="widget-head">
     <h4>窗口标题</h4>
    </div>
    <div class="widget-content">
     <p>望着沧茫大海,令我得到片刻解脱;不怀缅过去,也不展望未来。</p>
    </div>
   </li>
  </ul>
  <ul id="column3" class="column">
   <li class="widget color-orange"> 
    <div class="widget-head">
     <h4>窗口标题</h4>
    </div>
    <div class="widget-content">
     <p>就像这些樱花，每个生命都会凋零。每吸一口气，每喝一杯茶，每杀一个人都能体悟人生，这就是武士精神。</p>
    </div>
   </li>
   <li class="widget color-white"> 
    <div class="widget-head">
     <h4>窗口标题</h4>
    </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" />')
     .append('<ul><li class="item"><label>改变标题吗?</label><input value="' + $('h4',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('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 $('<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


body,img,p,h2,h3,h4,h5,h6,h7,ul,ol {margin:0; padding:0; list-style:none; border:none;}

body {font-size:0.8em; font-family:Arial,Verdana,Sans-Serif; background: #fff;}
a {color:white;}

.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;}


#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
}


#columns .column {
 float: left;
 width: 33.3%;
  
  min-height: 400px;
  height: auto !important; 
  height: 400px;
}
#columns .column-dingzh {
 float: left;
 width: 33.3%;
  
  min-height: 400px;
  height: auto !important; 
  height: 400px;
}

 #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;
}

inettuts.js.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如何实现拖拽可编辑模块功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网html频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jQuery如何实现拖拽可编辑模块功能

本文链接: https://www.lsjlt.com/news/67502.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • jQuery如何实现拖拽可编辑模块功能
    小编给大家分享一下jQuery如何实现拖拽可编辑模块功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！先给大家展示下效果图：具体...
    99+
    2022-10-19
  • js如何实现拖拽功能
    这篇文章主要为大家展示了“js如何实现拖拽功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“js如何实现拖拽功能”这篇文章吧。效果图：(红色方块可任意拖动)代码...
    99+
    2022-10-19
  • Angular+rxjs如何实现拖拽功能
    这篇文章主要介绍“Angular+rxjs如何实现拖拽功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Angular+rxjs如何实现拖拽功能”文章能帮助大家解决...
    99+
    2022-10-19
  • 如何实现html元素拖拽功能
    这篇文章主要讲解了“如何实现html元素拖拽功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何实现html元素拖拽功能”吧！1.创建拖拽对象 我们可以通...
    99+
    2022-10-19
  • 如何使用HTML5实现拖拽功能
    这篇文章给大家分享的是有关如何使用HTML5实现拖拽功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 　　问题：突然奇想，想在电影网上加一个收藏（类似于购物车的东西），可以通...
    99+
    2022-10-19
  • 如何实现小程序canvas拖拽功能
    这篇“如何实现小程序canvas拖拽功能 ”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何实现小程序canvas拖拽功能 ...
    99+
    2023-06-26
  • elementUI中el-dialog如何实现拖拽功能
    本文小编为大家详细介绍“elementUI中el-dialog如何实现拖拽功能”，内容详细，步骤清晰，细节处理妥当，希望这篇“elementUI中el-dialog如何实现拖拽功能”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来...
    99+
    2023-07-04
  • jquery如何实现元素可编辑
    本篇内容主要讲解“jquery如何实现元素可编辑”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery如何实现元素可编辑”吧! ...
    99+
    2022-10-19
  • html5中如何使用js实现拖拽功能
    这篇文章主要介绍了html5中如何使用js实现拖拽功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。1. HTML5 拖拽1.1 相关知识拖拽元素：可以为元素添加 dragg...
    99+
    2023-06-09
  • js如何实现横向拖拽导航条功能
    这篇文章给大家分享的是有关js如何实现横向拖拽导航条功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果如下：代码如下：<!DOCTYPE HTML> &...
    99+
    2022-10-19
  • vuejs2.0运用原生js如何实现拖拽元素功能
    这篇文章将为大家详细讲解有关vuejs2.0运用原生js如何实现拖拽元素功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。示例如下：<!DOCTYPE h...
    99+
    2022-10-19
  • 如何使用Vue3实现一个飘逸元素拖拽功能
    这篇文章主要介绍了如何使用Vue3实现一个飘逸元素拖拽功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何使用Vue3实现一个飘逸元素拖拽功能文章都会有所收获，下面我们一起来看看吧。推荐几个好用的工具var-...
    99+
    2023-07-05
  • HTML5+CSS3如何实现无插件拖拽上传图片功能
    这篇文章主要为大家展示了“HTML5+CSS3如何实现无插件拖拽上传图片功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“HTML5+CSS3如何实现无插件拖拽...
    99+
    2022-10-19
  • 微信小程序如何实现长按拖拽排序功能
    本篇内容主要讲解“微信小程序如何实现长按拖拽排序功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序如何实现长按拖拽排序功能”吧!演示效果：wxml<view class...
    99+
    2023-06-30
  • 使用vue自定义如何实现Tree组件和拖拽功能
    目录vue自定义实现Tree组件和拖拽功能vue2 + js版vue2 + ts 版总结vue自定义实现Tree组件和拖拽功能 实现功能：树结构、右键菜单、拖拽 效果图 vue2 ...
    99+
    2022-12-09
    vue自定义Tree组件 vue Tree组件 vue拖拽功能
  • 如何在Android应用中实现一个红点拖拽删除功能
    如何在Android应用中实现一个红点拖拽删除功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。CircleImageView核心代码private void ...
    99+
    2023-05-31
    android roi
  • jQuery如何实现可编辑表格并生成json结果
    这篇文章给大家分享的是有关jQuery如何实现可编辑表格并生成json结果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。实现效果如下，在编辑表格的同时可以实现字段json内容的自...
    99+
    2022-10-19
  • Python设计模式中如何使用状态模式实现编辑功能
    Python设计模式中如何使用状态模式实现编辑功能，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。功能介绍新增对象选择，连接线编辑功能。新增对象选择状态表示，连接...
    99+
    2023-06-19
  • Ant Design如何实现编辑、搜索和定位功能
    这篇文章主要介绍“Ant Design如何实现编辑、搜索和定位功能”，在日常操作中，相信很多人在Ant Design如何实现编辑、搜索和定位功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，...
    99+
    2022-10-19
  • 如何使用jQuery实现一个类似GridView编辑,更新,取消和删除的功能
    这篇文章主要为大家展示了“如何使用jQuery实现一个类似GridView编辑,更新,取消和删除的功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用jQ...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作