var draggables = g(".draggables");
for(var i=0;i<draggables.length;++i)
{
//直接设置为拖动对象
draggables[i].setDraggable();
//事件函数
//拖动开始:
draggables[i].onDragStart = function () {
//alert("start");
};
//在拖动的时候:
draggables[i].onDrag = function () {
//alert("move");
};
//拖动结束
draggables[i].onDragOver = function () {
//alert("over");
};
//设置拖动热点,dragHotspot是要拖动对象的子对象,只有dragHotspot被点击了后才激发拖动事件.
draggables[i].dragHotspot = g(".draggables > h1")[i];
//设置拖动范围,现在的拖动范围为整个文档,拖动操作不会越过屏幕.
draggables[i].dragScale = document.documentElement;
//取消拖动
//draggables[i].dropDraggable();
}
同样,把事件函数都设为null就可以取消了例如:draggables[i].onDragOver = null;.很简单,支持n个对象的拖动,只要setDraggable();一下即可;
分享到:
相关推荐
JavaScript控件是网页开发中常用的一种元素,它们用于增强用户界面的交互性和功能。JavaScript是一种轻量级的脚本语言,常被嵌入HTML页面中,以实现动态内容的生成和用户交互。在这个主题中,我们将深入探讨...
在JavaScript的世界里,滑动杆(Slider)控件是一种常见的用户界面元素,它允许用户通过拖动一个可移动的柄来选择一个值或范围。在本主题中,我们将深入探讨两个JavaScript滑动杆控件,它们可以提升网页的交互性和...
在JavaScript编程领域中,创建可拖动窗口控件和弹出提示框是常见的需求,尤其在Web应用中,用户交互的界面设计至关重要。本资源提供了一种解决方案,它是一个基于JavaScript和CSS的可定制对话框控件,允许开发者创建...
"强大的js拖动控件"标题所提及的,可能是一个高效的JavaScript库或者插件,用于实现这种交互效果。在实际应用中,这种控件可以用于文件管理器、桌面应用模拟、图表元素调整等场景。 描述中的“博文链接:...
JavaScript控件开发是Web开发中的重要一环,特别是在构建交互丰富的网页应用时。布局控件是其中的关键元素,它允许开发者有效地组织和管理页面上的元素,实现多控件的协调和共存。在这个主题中,我们将深入探讨...
在IT领域,尤其是在软件开发和用户界面设计中,"任意拖拽控件"是一个重要的功能,它允许用户通过鼠标操作自由地移动界面中的元素或控件。这种技术极大地提升了用户体验,因为它赋予了用户更高的自由度来定制和组织...
5. **JavaScript库和框架**:很多JavaScript库和框架提供了封装好的拖拽功能,如jQuery UI、React DnD、Angular Dragula等,它们简化了实现拖拽控件布局的复杂性。开发者可以通过这些工具快速构建拖放功能,而无需从...
2. **拖放功能**:描述中提到控件具有拖动功能,这意味着用户可以重新排列树的结构,将节点从一个位置移动到另一个位置,这对于组织和排序数据非常有用。 3. **事件处理**:JavaScript树控件支持各种事件,如节点的...
JavaScript时间控件是Web开发中的重要元素,它们允许用户在网页上方便地选择或输入日期和时间。在没有这样的控件时,用户可能需要输入精确的日期格式,这可能会增加用户的输入负担。JavaScript时间控件通过提供交互...
这个“简单拖拽控件的示例操作”旨在展示如何实现这样的功能,并让用户了解其工作原理。 首先,我们来看“拖动”这一动作。在网页或应用中,拖动通常涉及到鼠标或触摸设备的按住、移动和释放等事件。在HTML5中,`...
JavaScript弹框控件是网页开发中的一个重要组成部分,它允许开发者以更加美观和交互性更强的方式向用户展示信息或获取用户输入。传统的JavaScript弹框如`alert()`、`prompt()`和`confirm()`虽然功能简单,但在现代...
在这个"EXT 控件拖动例子"中,我们将深入探讨EXTJS如何实现控件的拖放功能,以及如何在动态布局中运用这一特性。 EXTJS 提供了一个名为`Ext.dd.DragDrop`的接口,它使得在界面上的元素可以被拖动和放置。这个接口...
JavaScript日历控件是一种常用的网页交互元素,常用于输入日期的场景,比如在线表单、事件计划等。这种控件可以提供用户友好的界面,使用户能够方便地选择日期,而不是手动输入。在这个主题中,我们将深入探讨...
10. **拖放功能**:JavaScript支持拖放API,使得用户可以轻松地在网页上拖动元素,这对于文件上传或页面布局调整非常有用。 以上这些知识点都是“阿赖实用javascript控件程序”可能涉及的领域,每个控件都可能针对...
网页拖动菜单控件是一种交互性强、用户体验良好的前端技术实现,尤其在现代Web应用中非常常见。这种控件允许用户通过鼠标拖动操作来移动菜单项,为网站或应用程序增加了一种直观且动态的交互方式。Ajax...
jQuery可拖拽控件是这个库的一个重要功能,它允许用户通过简单的API实现元素的拖放操作,极大地提升了用户体验。下面将详细阐述jQuery可拖拽控件的相关知识点。 ### 1. jQuery UI Draggable jQuery自身并没有内置...
本文将详细解析"拖拽上传控件及其例子"这一主题,包括核心概念、技术实现以及示例代码。 拖拽上传是利用HTML5的拖放(Drag and Drop)API来实现的一种功能,允许用户直接通过鼠标或触屏设备从桌面或其他网页拖动文件...
### JavaScript表格控件:Chgrid,简化型 #### 概述 Chgrid是一款基于JavaScript的表格控件,它被设计为轻量级且易于使用的工具,适用于需要展示数据的Web应用。该表格控件旨在通过简化操作流程和提供实用功能来...
在IT界,尤其是在软件开发和用户界面设计领域,创建可拖动的控件是一项基本技能。控件,如标签(Label),是用户界面中的元素,它们通常用来展示文本信息或者作为交互的入口。本篇文章将深入探讨如何实现一个简单的...
JavaScript悬浮窗口控件是一种网页开发技术,主要用于在用户浏览页面时提供始终可见的交互式窗口。这种窗口可以是通知、菜单、广告或者其他任何需要始终保持在屏幕前层的元素。通过JavaScript,开发者能够创建动态的...