用Jquery UI插件给页面元素添加拖拽事件实现条目分组,但在分组之后转移的元素没有继承原来的事件-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

用Jquery UI插件给页面元素添加拖拽事件实现条目分组,但在分组之后转移的元素没有继承原来的事件

游客zp4ak46ubdjfe 2020-09-12 17:18:54 61

用Jquery UI插件给页面元素添加拖拽事件实现条目分组,但在分组之后转移的元素没有继承原来的事件 1. 百度之后,说是要利用on()事件绑定 2. 但我的代码放到on()里却没有效果,浏览器也不报错 3. 代码如下:

$("body").on("droppable", selecter, function() { function drop(event, ui) {

var sourceElement = $(ui.draggable);
var src=sourceElement.find("img").attr("src");
var name=sourceElement.find("p").html();
					
  var html='********************':

targetElement.next().prepend(html);
                                                                                       
sourceElement.remove();
		       }
	});

求大神指点

JavaScript
分享到
取消 提交回答
全部回答(1)
  • 游客2q7uranxketok
    2021-02-20 15:49:40

    拖拽原理 首先要明确几个概念。   ource:拖拽源,要拖动的元素。   taerget:拖放目标,能够放入source的容器。 拖拽的动作分解如下:   1. drag start:在拖拽源(source)上按下鼠标并开始移动   2. drag move: 移动过程中   3. drag enter: 移动进入目标(target)容器   4. drag leave: 移出目标(target)容器   5. drop: 在目标(target)容器上释放鼠标   6. drag end: 结束 在html5之前,页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。

    最简单的例子 最简单的拖拽是不改变元素所在的容器,而只改变其位置。例子如下: 复制代码代码如下:

    拽我!

    拖动到另一个容器 更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上,增加一个div作为容器,并应用droppable函数: 复制代码代码如下:

    拽我!

    Drop here

    事件监听和回显(Feedback) 运行上一个例子,你可能会产生疑惑,真的放到目标容器上了吗?用户也会产生同样的疑惑。所以,可以监听拖动过程中发生的一些事件,并用可见的方式让用户知道。这就叫做回显(Feedback)。

    对于源(source),可以监听的事件包括:

      create: 在source上应用draggable函数时触发   start:开始拖动时触发   drap:拖动过程中触发   stop:释放时触发 对于目标(target),可以监听的事件包括:   create: 在target上应用droppable函数时触发   activate:如果当前拖动的source可以drop到本target,则触发   deactivate:如果可以drop到本target的拖拽停止,则触发   over:source被拖动到target上面   out:source被拖动离开target   drop:source被释放到target 事件处理函数都是通过draggable和droppable函数的参数传递,在这些事件处理函数中就可以进行Feedback。看一下实际的例子: 复制代码代码如下:

    :-|

    Can drop!

    复制拖动 前面的例子都是移动元素,另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。

    helper可以指定为“original”, "clone",其中"original"是默认值,即拖动自身,而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数,该函数返回一个自定义的DOM元素用于拖拽。 当不是拖动自身的时候,需要在target上指定drop事件函数,在该函数中将特定的元素添加到target容器上,否则drop的时候什么事情都不会发生。 简单复制的例子如下: 复制代码代码如下:

    拽我!

    拖动控制 到目前位置,所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。

    拖动方向 默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下: 复制代码代码如下:

    --

    |

    拖动范围 除了方向之外,还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。其中String可以为parent,document,window,Array是指定一个矩形区域(regin)的四元数组:[x1,y1,x2,y2]。下面的例子分别指定了parent和regin作为范围限制: 复制代码代码如下:

    in parent

    in regin

    拖动吸附 还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素,使用grid参数指定吸附到网格,如下:

    复制代码代码如下:

    吸附到其他可拖拽元素

    吸附到容器

    吸附到网格(30x30)

    拖动把手(handle) 默认是整个元素都可以拖动,也可以指定元素的某个子元素作为拖动的handle,如: 复制代码代码如下:

    handle

    ……

    Drop限制 默认的droppable指定元素能够接受所有的drop, 但是可以通过accept参数限定只能接受某些元素的drop。accept参数的类型为一个符合jquery selector的字符串。例如: $(".selector").droppable({ accept: '.special' }) 表示只接受具有special 样式的元素。

    增强用户体验 前面是实现拖拽的功能,JQueryUI还有一些参数可以增强用户体验。比如,cursor参数可以指定鼠标指针的形状,cursorAt指定鼠标指针在source的相对位置,revert可以指定当drop失败时source“飘”回原来的位置。一个组合的例子如下: 复制代码代码如下:

    I revert when I'm not dropped

    Drop me here

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程