jQueryUI 的 拖拽插件极大的方便了开发者对拖拽功能的实现,但是官方教程给的太笼统,在具体实现的时候很多地方不明确,这里说一下我遇到的两个 "小坑":

1:Draggable 的clone  属性.

2:Droppable 接受拖拽控件的定位问题(拖到哪,就放在哪)

首先是第一个"坑",在做一些类似编辑器的东西时需要我们实现类似拖拽控件的功能,即从 "工具栏" 拖到 "编辑栏".这就需要用到 clone属性,在使用这个属性实现效果时,编辑栏并没有显示被clone的控件,经查证需要在接受栏也就是编辑栏 接受(添加)一下.

代码就不贴了 截个图

接下来  是第二个"坑":被拖拽控件的定位 其实很简单 做一个绝对定位并设置距上距左的距离就OK了,自己对插件不熟悉愣是掉坑里了(⊙﹏⊙)~~~

图解:

思路通了就很好理解了,这里代码很简单,就是指明拖拽插件使用过程中的两个盲点~希望对这方面开发的菜鸟(包括我~~~)一些帮助!

jQueryUI Draggable 和 Droppable 配合使用时遇到的两个坑的更多相关文章

  1. jQuery插件--zTree中点击节点实现页面跳转时弹出两个页面的问题

    这是第一次使用zTree,所以在使用之前我要先写一个demo来学习一下.我们要注意的是,zTree是一个jQuery插件,所以我们在导入zTree的js文件之前要先导入jQuery的js文件. 我们先 ...

  2. Quartz每次调度时被执行两次

    [关键字:重复执行.重复调用.每次执行两次.执行2次] 前言: 先说一下,项目背景.由于组内某成员在用Maven搭建项目时不规范,导致项目的名称与实际访问项目名称不一致.在部署项目时,必需要配一下虚拟 ...

  3. 使用jQuery Draggable和Droppable实现拖拽功能

    上篇博客中已经介绍了web开发中基本拖放原理,现在给出需要完成的功能.最后运行的效果如下图所示: 主要功能需求说明: 1.左侧的元素结构最后会通过Ajax call服务器的数据来生成,能支持多级元素. ...

  4. jquery UI Draggable和Droppable 案例

    <html> <head><title>draggable</title> <script type="text/javascript& ...

  5. gulp-uglify 与gulp.watch()配合使用时遇到的重复压缩问题

    今天学习gulp时候,用到gulp-uglify压缩js模块,遇到的一个问题-当用gulp.watch来监听js文件的变动时出现重复压缩的问题 目录结构如下: gulpfile.js代码如下: var ...

  6. 菜鸟在C语言编译,链接时可能遇到的两个问题

    最近在看 CSAPP (Computer Systems A Programmers Perspective 2nd) 的第七章 链接.学到了点东西,跟大家分享.下文中的例子都是出自CSAPP第七章. ...

  7. UWP中重用C/C++代码时踩过的一些坑

    标题中提到的UWP,主要是指用C#来写UWP的主工程,开发过程中可能需要调用C/C++实现的库. 为什么需要调用C/C++的库呢,举个例子,开源库OpenSSL实现了许多加密算法,稳定快速,我们想在应 ...

  8. Android入门开发时注意的两个问题

    android开发中的问题: . 开发应用时要访问网络往往会忘记添加网络权限 <uses-permission android:name="android.permission.INT ...

  9. 今天maven install时碰到的两个问题(堆溢出和编译错误)

    问题1.maven install时出现,日志如下: 系统资源不足.有关详细信息,请参阅以下堆栈追踪. java.lang.OutOfMemoryError: Java heap space at c ...

随机推荐

  1. KRPano资源分析工具使用说明(KRPano XML/JS解密 切片图批量下载 球面图还原 加密混淆JS还原美化)

    软件交流群:571171251(软件免费版本在群内提供) krpano技术交流群:551278936(软件免费版本在群内提供) 最新博客地址:blog.turenlong.com 限时下载地址:htt ...

  2. ubuntu 加载新硬盘或分区

    查看目前挂载情况 df -lh 查看新的空间或硬盘 fdisk -lu 新硬盘分区 fdisk /dev/sda 输入m 根据提示输入n(创建一个分区) 然后输入e(扩展分区) 输入分区数1 然后指定 ...

  3. dubbo升级spring4与cxf

    阿里的dubbo项目是基于spring2.x的.但之后停止更新了.当当网有根据dubbo扩展成dubbox,基于spring3.x,但我的项目中用的是spring4.x,于是fork了dubbox,自 ...

  4. freemarker 中文乱码

    <bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker ...

  5. [Android Pro] Android异步任务处理之AsyncTaskLoader的使用

    reference to : http://blog.csdn.net/happy_horse/article/details/51518280 最近项目中涉及到加载本地的地名.db文件,数据量大,自 ...

  6. Linux posix线程库总结

    由于历史原因,2.5.x以前的linux对pthreads没有提供内核级的支持,所以在linux上的pthreads实现只能采用n:1的方式,也称为库实现. 线程的实现,经历了如下发展阶段: Linu ...

  7. javascript 核心语言笔记 5 - 语句

    表达式在 JavaScript 中是短语(phrases),那么语句(statements)就是 JavaScript 整句或命令,语句以分号结束.表达式计算出一个值,语句用来执行以使某件事情发生 表 ...

  8. 创建Hello World程序(part-1)

    写在前面: 2006年,刚上大学,班上有几个计算机文盲,1分钟打二十几个字都困难,很不幸,我就是其中的一个.强烈的自尊心驱使我不停恶补,翻遍了图书馆的计算机文化基础,知耻而后勇...后来,C语言居然考 ...

  9. leetcode 137[转]

    没思路.网上找到的. 1. 将每一个int看成32位数,统计每一位出现的次数对3取余,所以需要开辟一个32大小的数组来统计每一位出现的次数 2. 对第一种思路进行简化,模拟3进制: three two ...

  10. HDU 5742 Chess SG函数博弈

    Chess Problem Description   Alice and Bob are playing a special chess game on an n × 20 chessboard. ...