jQueryUI Draggable 和 Droppable 配合使用时遇到的两个坑

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

1:Draggable 的clone  属性.

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

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

代码就不贴了 截个图

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

图解:

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

时间: 2024-11-05 13:35:00

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

jqueryUI draggable和droppable 关于fullCalendar

最近要写一个日历??来管理一天的事务.用工作室买来的Metronic模版,找到我想要的日历模版. 讲讲fullcalendar吧: 我花了两天时间看源码fullcalendar.js.在里面发现了许多jquery-ui里的东西,我摸清了自己很多js已经不用写太多了,大部分写的是ajax请求,将静态代码动态化的过程.但是两天的时间都在摸索,没有任何代码写入真的让人忧伤,然后发现了有官方手册http://fullcalendar.io/docs/. 全英文的手册对于我这种英语小白来说,好头痛,硬着脑

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

这是第一次使用zTree,所以在使用之前我要先写一个demo来学习一下.我们要注意的是,zTree是一个jQuery插件,所以我们在导入zTree的js文件之前要先导入jQuery的js文件. 我们先下载zTree,点击我跳转到一个网站进行下载 代码直接贴出来 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link

配置ssh public key登陆时遇到的两个问题

在添加本机的public key到远程服务器之后,理论上如果ssh的配置文件没有问题并且网络和端口是通的,就可以无密码登陆到远程服务器,然而如果不能登陆,则可能是如下两个原因: 远程服务器的$HOME/.ssh目录权限必须是700,$HOME/.ssh/authorized_keys的权限必须是600,本机的$HOME/.ssh/id_rsa或者$HOME/.ssh/id_dsa文件的权限必须是600.这种问题修改文件和目录的权限即可解决. 本机的$HOME/.ssh/known_hosts文件

android 拍照时强制开两个CPU

进入相机拍照,拍照动画和拍照声音会概率性发生卡顿. 此问题发生的原因是在拍照期间概率性只有一颗CPU打开,而拍照时loading会比较重,导致一颗CPU处理不过来,所以会出现拍照动画和拍照声音卡顿的问题. 解决方法:拍照时强制开两颗CPU,足以处理拍照时的loading. KK版本上可以按以下方法修改. 在photoactor.java中 1.    添加如下代码 import com.mediatek.common.MediatekClassFactory; import com.mediat

Quartz每次调度时被执行两次

[关键字:重复执行.重复调用.每次执行两次.执行2次] 前言: 先说一下,项目背景.由于组内某成员在用Maven搭建项目时不规范,导致项目的名称与实际访问项目名称不一致.在部署项目时,必需要配一下虚拟路径,映射到那个项目所在目录下去,才能正常访问.举个例子:项目名称叫student-web,部署到Tomcat-webapps下,本地环境正常情况下的访问url应该是: 127.0.0.1:8080/student-web 而实际访问的url需要这样: 127.0.0.1:8080/student

如果一个类同时继承的两个类都定义了某一个函数会怎样呢

如果一个类同时继承的两个类都定义了某一个函数会怎样呢 | Code4Fun 盒子 盒子 博客 分类 标签 友链 关于 RSS 搜索 入下面所示:类C同时继承了A和B,并且两个都定义了相同的函数,如果这时候编译的话会得到错误. 1 2 3 4 5 6 7 8 9 10 testhir.cpp: In function 'int main(int, const char**)': testhir.cpp:26:7: error: request for member 'printR' is ambi

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

今天学习gulp时候,用到gulp-uglify压缩js模块,遇到的一个问题-当用gulp.watch来监听js文件的变动时出现重复压缩的问题 目录结构如下: gulpfile.js代码如下: 1 var gulp = require('gulp'); 2 var uglify = require('gulp-uglify'); 3 var rename = require('gulp-rename'); 4 5 gulp.task('uglify', function() { 6 gulp.s

C#的兰姆达表达式与委托配合使用时的一些问题

大家应该都是知道,C#的委托+=和-=都是根据函数的签名来识别的,但是如果符号的右边是一个兰姆达表示式(例如:delegate0+=()=>{}),这个时候怎么判断右边的函数是不是同一个呢? 写个例子来测试一下,如下图,运行两次Test方法,传递的参数都是一样的兰姆达表达式,通过action委托的-=并没有将看起来一样的兰姆达表达式函数去除,为什么呢?(当然如果是传递两个确切的函数名就会最终只打印一行"hello world",读者可自行测试), 我们来断点调试一下:可以看出运行

[Android]使用 Eclipse 给 APK 签名时遇到的两个问题及解决办法

问题 今天用 APK 反编译工具看了一下自己项目生成的 APK 文件,发现代码并没有混淆,于是设置了用 ProGuard 混淆代码,可是混淆是必须在非 Debug 模式才会生效的,即使你是以 Release 模式来 Run As 启动所生成的 APK 包,依然是没有使用 ProGuard 混淆的.于是决定导出一下 Release 版的 APK,导出分“签名”和“不签名”的两种,都这么做了,当然是要签名一下了,所以遇到了后面这两个问题. 一.strings.xml 的翻译问题 在你的项目名字上面点