素材牛VIP会员

jQuery模块拖拽排序与模块编辑效果

 所属分类:网页特效-触屏/拖拽/下拉

 浏览:1915次  评论:1次  更新时间:2018-09-28
牛币素材VIP可免积分下载
jQuery模块拖拽排序与模块编辑效果兼容IE9
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:网站模板的模块编辑与模块拖拽排序效果

详细介绍

// 调用
$(".js_module_1").moduleSet({
    button:[
        {text:'编辑',callback:function(){alert('编辑')},iconfont:''},
        {text:'删除',callback:function(){alert('删除')},iconfont:''},
    ],
})
$(".js_module_2").moduleSet({
    button:[
        {text:'编辑',callback:function(){alert('编辑2')},iconfont:''},
        {text:'美化',callback:function(){alert('美化2')},iconfont:''},
    ],
})
$(".js_module_3").moduleSet({
    button:[
        {text:'编辑',callback:function(){alert('编辑3')},iconfont:''},
        {text:'美化',callback:function(){alert('美化3')},iconfont:''},
    ],
})
// 排序
var container = document.getElementById("container");
var sort = Sortable.create(container, {
  animation: 150, // ms, animation speed moving items when sorting, `0` ― without animation
  handle: ".module1", // Restricts sort start click/touch to the specified element
  draggable: ".module1", // Specifies which items inside the element should be sortable
  onUpdate: function (evt/**Event*/){
  alert(11)
     var item = evt.item; // the current dragged HTMLElement
  }
});

文件目录结构

  • ┝ index.html
  • ┝ jquery.min.js
  • ┝ moduleSet.js
  • ┝ moduleSet.min.js
  • ┝ Sortable.min.js

相关素材 - 触屏/拖拽/下拉

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

xi***mo  
2018年11月08日

学习了

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:3 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)