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. 使用ngrok将内网映射为外网

    如何将自己的本地服务器映射到外网上去?我们可以使用ngrok这个工具,下载地址:http://pan.baidu.com/s/1slnMwPn 具体的操作步骤如下: 第一步.下载客户端我们建议下载的时 ...

  2. java类加载器加载文件

    例子:采用配置文件加反射的方式创建ArrayList和HashSet的实例对象. //第一种方式:类加载器加载文件 InputStream ips = ReflectTest2.class.getCl ...

  3. 【转载】Shell判断字符串包含关系的几种方法

    http://www.cnblogs.com/ginsonwang/p/5525340.html 下面是直接copy的内容: (本来是不打算copy的,但是每次用到或看的时候都要跳转,感觉挺麻烦的.就 ...

  4. DataGridView里CheckBox实现全选控制

    1. checkbox点击事件 private void myStyleDataGridView1_CellClick(object sender, DataGridViewCellEventArgs ...

  5. 初入水：vector

    ---恢复内容开始---Vector 是一个类模板.不是一种数据类型. Vector<int>是一种数据类型 类的作用,是一种顺序容器,支持随机访问,可动态分配空间(扩充:销毁旧内存,更新 ...

  6. FusionCharts和highcharts 饼图区别!

    FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...

  7. 采用cocos2d－x lua 制作数字滚动效果样例

    require "Cocos2d"require "Cocos2dConstants"local testscene = class("testsce ...

  8. Sublime Text实用小技巧

    1.输入"!"或"html:5",然后按Tab键: html:5 或!:用于HTML5文档类型 html:xt:用于XHTML过渡文档类型 html:4s:用于 ...

  9. node（Buffer缓存区）

    // 创建buffer类 var buf=new buffer(10); var buf=new buffer([10,20,30,40]); var buf=new buffer("www ...

  10. Delphi在创建和使用DLL的时候如果使用到string，请引入ShareMem单元

    当使用了长字符串类型的参数.变量时,如string,要引用ShareMem. 虽然Delphi中的string功能很强大,但若是您编写的Dll文件要供其它编程语言调用时,最好使用PChar类型.如果您 ...