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. Python 开源网上商城项目

    django-oscar  https://github.com/django-oscar/django-oscar#screenshots django-shop  https://github.c ...

  2. SAP SMARTFORM 记录实际打印次数

    http://blog.csdn.net/wangjolly/article/details/8334008

  3. $_session (应用)

    登录: 封装类(用于连接数据库)代码中创建一个对象最好可以重复使用 <?php class DBDA { public $host="localhost"; public $ ...

  4. tp框架实现验证码

    今天来看一个小插件. tp框架是怎么实现验证码的. 又到了我们千篇一律的时候了,首先呢,先做一个用来显示的html界面名为:zhuce.html <!DOCTYPE html PUBLIC &q ...

  5. Div 定时移动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. CENTOS7 mysql 安装

    CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1. 下载mysql的repo源 $ wget http://repo.mysql.com ...

  7. NotePad++中如何出去闪烁的光标？

    当在写代码时出现的光标闪烁(横线闪烁),在键盘上找 Insert ,按这个Insert就可以把横向闪烁光标( _ )修改成竖向闪烁光标样式( | ),横向光标会在你写代码的时候修改前面的代码,把光标移 ...

  8. CSS3简单的栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 关于 js 一些基本的东西

    r.js 可以打包(可以实现前端文件的压缩与合并). 客户端尽量遵循 amd 规范. 推荐使用 requirejs 规范. requirejs 简单教程: http://www.runoob.com/ ...

  10. python 爬虫（四）

    爬遍整个网络 1 当我们访问整个网络的时候,我们不可避免的会访问不同的网站,但是不同的网站会有完全不同的结构和内容... 现在一步一步的构建访问整个网络的脚本 I 从一个网站开始,每一次都爬向不同的网 ...