位置: 编程技术 - 正文

Jquery UI实现一次拖拽多个选中的元素操作(jquery ui autocomplete)

编辑:rootadmin

推荐整理分享Jquery UI实现一次拖拽多个选中的元素操作(jquery ui autocomplete),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:使用jquery,使用jquery实现的项目,jquery只执行一次,使用jquery实现的项目,jquery只执行一次,jquery ui draggable,jquery ui autocomplete,使用jquery实现的项目,内容如对您有帮助,希望把文章链接给更多的朋友!

项目需要,实现一个拖放操作,要求每次可以拖拽选中的多个元素,释放到目标容器后可排序。考虑了一下,觉得jquery-ui比较合适,毕竟它提供了项目需要的交互性事件机制。拖拽、释放、排序、选择等效果。而在实际的操作中,遇到个很多的问题,说明一下,最后附上效果图和代码。

1.本人使用的bootstrap框架,引入jquery-ui后,为元素添加拖拽方法后,提示该方法不是一个函数。查找原因,是bootstrap和jquery-uide的$ 标识符控制权冲突。在引入的jquery-ui的js前加上一下语句解决

2.jquery-ui的提供了选择操作(单选,多选),其中多选可以按住Ctrl配合鼠标单击多选,也可以鼠标在多个元素上拖拽进行多选。在为同一元素添加上选择操作和拖拽操作时,出现了问题。

a:多选的操作由于可以在元素上拖拽,与本身的拖拽事件有冲突(个人认为鼠标拖拽多选的效果并没有使用shift配合鼠标点击好用)。

b:jquery-ui没有发现可以将多个单独的元素同时拖拽。

不知道是本人愚钝没有发现jquery-ui可以使用本身自带的方法和属性,即可以支持多选又能拖拽选中的元素操作。哪位读者如果知晓还请告知。3Q!

Jquery UI实现一次拖拽多个选中的元素操作(jquery ui autocomplete)

总之,试验了多个jquery-ui的属性和事件,有去试着将jquery-ui的拖拽多选操作删除,也没有发现我需要的效果。所以,考虑了一下,决定不适用jquery-ui的选择操作。自己来写一个选择操作。与我们平常使用的事件触发机制一样。(鼠标单击单选,Ctrl+鼠标多选,Shift+鼠标多选),然后配合jquery-ui的drag和drop和sort事件机制实现拖拽排序效果。

再插一嘴,拖拽多个元素的效果,实际上是拖拽一个指定的dom元素,可以将需要拖拽的所有节点都放置到该元素中。这个需要配合jquery-ui的drag中的helper函数,返回一个新的拖拽元素集合。(关于jquery-ui的一些事件和属性大家可从网上查阅。不过说得也不尽详细,还需要自己去实验)。

Okay,贴出简单的效果图和代码

                         图一(拖放中效果)

                         图二(释放后效果)

效果图如上,左侧橙色为选中的节点,红色椭圆内部为鼠标拖拽的效果,3表示选中的元素呢个数;右侧的黄色区域表示可以释放和排序的容器。在该区域拖放时,节点会根据鼠标的位置自动排序,如图,如果释放鼠标后,左侧的3个节点就会移动到4.对应的黄色区域。

当然,以上的效果需要去重新给拖拽目标赋予新的元素,并且监听拖拽,释放等时间,编写用户自定义的逻辑。贴出自己的代码,一些事件和属性可以查阅jquery-ui的文档。

代码可用(没有写单选的释放效果,例子是目前的一个试验品,后续还要改成插件方式)。记录一下这两天的心得。主要是查找事件机制,整理思路和处理冲突问题花费了一定精力,得记上一笔。

标签: jquery ui autocomplete

本文链接地址:https://www.jiuchutong.com/biancheng/379375.html 转载请保留说明!

上一篇:jQuery.datatables.js插件用法及api实例详解

下一篇:Easyui的组合框的取值与赋值(easyui框架的优缺点)

  • 缴纳房产税怎么记账
  • 实质课税原则是税法基本原则吗
  • 所得税申报是什么
  • 城建税计税依据扣除增值税期末留抵
  • 应发工资包含请年假吗
  • 个税网络申报
  • 展位费怎么入账
  • 营业外支出为负数怎么处理
  • 国有独资企业交企业所得税规定
  • 返聘已退休人员是否需要缴纳社保
  • 产品售后维修产品介绍
  • 一般纳税人制作除尘器的制作费开票税率是多少
  • 企业每个月都要关账吗
  • 购买固定资产的进口关税
  • 补计提以前年度增值税
  • 小规模纳税人所得税优惠政策2023
  • 增值税普票收款人
  • 增值税扣税项目范围
  • 增值税电子发票有限额吗
  • 加计扣除10%进项税账务处理 如何填表
  • 未按规定期限办理身份证
  • 外资企业投资国内企业程序
  • 分期收款销售的核算中发出商品时借什么账户
  • 专票私人能开吗?
  • 股票投资报酬率怎么算excel
  • win7怎么运行在哪里设置
  • 缴纳印花税怎么算
  • 留抵增值税的会计处理
  • 利息股息红利所得属于综合所得吗
  • 境外人员定义
  • 差额银行承兑汇票
  • ges.dll
  • php静态函数
  • 开票逃税的处罚
  • 最贵的安卓应用软件
  • 担保公司未到期责任准备金会计及税务处理案例
  • javafiles
  • 使用spring框架,大概有哪些步骤
  • 一文搞懂兰州简史
  • openai发布企业版
  • lspci命令显示
  • php读取xml接口数据
  • 未确认融资费用怎么算
  • 资产负债表不平衡能结账吗
  • 一般户可以转账给员工报销吗
  • PHP MongoDB GridFS 存储文件的方法详解
  • 基于法律行为的物权变动模式包括
  • 电子承兑汇票的承兑人是谁
  • 公司出租房屋如何开票
  • 利息收入怎么入账
  • msdn sql server
  • 首次购买金税盘怎么做账
  • 企业注销资本公示时间
  • 交易性金融资产属于流动资产
  • 土地出让金返还比例是多少
  • 建筑业纳税人简易征收偷逃增值税
  • 增值税系统技术维护费 减免政策
  • windows 专业版10安装后文件会丢失嘛
  • cmos设置密码开机密码
  • .ccc是什么文件
  • windows server 2016 百度网盘下载
  • ntfs权限设置步骤
  • 在win8下能直接装win7吗
  • win7系统怎么卸载显卡驱动
  • 电脑双系统删除一个系统的步骤
  • 物联网版块股票
  • computed缓存
  • Shell正则表达式获取指定字符串
  • html收藏夹导入
  • 2012年腾讯股价多少
  • node 操作mysql
  • 搭建nodejs项目
  • python的math模块只有pass
  • jquery动态添加的元素怎么添加事件
  • 北京天然气收费标准2024年
  • 纳税人总机构和分机构不在同一县怎么办
  • 百旺税控盘口令认证失败pin锁定怎么办
  • 总公司和子公司是什么关系
  • 税务登记办法细则
  • 2021年社保又涨价了
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设