<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
<font color="magenta">.block{ width:200px; height:200px; background:#CCC; border:1px solid #FF0; margin-top:10px; margin-left:100px;}
#x,#y{width:50px; height:50px; border:1px solid #F00;}
#parent{width:100px; height:100px; border:1px solid #090;}
.draggable{width:300px; height:300px; border:1px solid #333; margin-top:10px; text-align:center; vertical-align:middle;}
.red, .green{width:100px; height:100px; border:1px solid red; margin-top:10px;}
.green{ border:1px solid green;}</font>
</style>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
//draggable的用法
/* for(var i=0;i<3;i++){
$(document.body).append($("<div class='block'>"+i.toString()+"</div>"));
}
$(".block").draggable();*/
//x、y轴拖拽
/*$("#x").draggable({axis:"x"});
$("#y").draggable({containment:"parent",axis:"y"});
$("#parent").draggable({containment:"parent"});
*/
//拖入购物车
$(".draggable").draggable({helper:"clone"});
$("#draggable-accept").droppable({
accept:function(draggable){
return $(draggable).hasClass("green");
},
drop:function(){
$(this).append($("<div></div>")).html("drop!");
}
});
});
</script>
</head>
<body>
<!--<div class="block" id="one">
<div id="x">x轴</div>
</div>
<div class="block" id="two">
<div id="y">y轴</div>
</div>
<div class="block" id="three">
<div id="parent">父元素</div>
</div>-->
<div class="draggable red">draggable red</div>
<div class="draggable green">draggable green</div>
<div id="draggable-accept" class="draggable">
draggable
</div>
</body>
</html>
分享到：
相关推荐
3. JavaScript文件：包含了使用jQuery和Canvas API实现的拖动插件代码。 4. 图像资源：如果拖动的元素包含图片，这些资源可能会出现在压缩包中。 5. 示例或测试页面：展示插件功能的页面，可能包含不同类型的可拖动...
实现jQuery拖拽功能的关键是使用`.draggable()`方法。这个方法为选定的元素添加拖拽行为。基础的使用方式如下： ```javascript $(function() { $("#elementId").draggable(); }); ``` 这里的`#elementId`是你想要...
首先，jQuery库为我们提供了一个方便的`draggable()`插件，用于实现元素的拖拽功能。这个插件允许用户通过鼠标操作，将指定的DOM元素在页面上移动。要使用`draggable()`，你需要确保已经引入了jQuery库和jQuery UI库...
以下是实现jQuery拖拽插件的基本步骤： 1. **初始化插件**： 在页面加载完成后，选择要实现拖拽功能的元素，并调用自定义的拖拽插件函数。例如： ```javascript $(document).ready(function() { $('.draggable'...
综上所述，jQuery Gridly 拖拽排序插件提供了强大的布局管理和拖放功能，其回调机制则为开发者提供了获取拖动位置信息的能力，进而实现各种定制化的交互体验。无论你是构建一个简单的卡片布局还是一个复杂的项目管理...
本资源"jquery实现拖拽排序插件.zip"提供了一个使用jQuery实现的拖拽排序功能，这在开发交互式网页时非常有用，尤其是需要用户自定义顺序的列表或网格布局。 拖拽排序是一种常见的用户界面特性，允许用户通过鼠标...
本文将详细讲解如何利用jQuery实现网格（Grid）中的列拖动功能，以及如何展示和压缩内容，以达到类似Excel的效果。 首先，我们需要引入jQuery库和jQuery Grid插件的相关文件。jQuery Grid通常基于jQuery UI，因此...
本文将详细介绍一个好用实用的jQuery拖拽插件，帮助开发者轻松实现拖放功能。 ### 1. jQuery UI Draggable jQuery UI 是jQuery的一个扩展库，提供了包括拖拽在内的多种交互组件。`draggable()`是jQuery UI中的一个...
"jQuery拖拽布局插件Portal"是基于jQuery的一个扩展，专门用于实现用户界面元素的拖放和自定义布局功能。在网页设计和开发中，这种插件能够为用户带来高度互动性和个性化体验，常应用于仪表盘、工作台或自定义配置...
在jQuery中实现拖拽功能通常涉及以下步骤： 1. **选择可拖动元素**：使用jQuery选择器选取需要成为拖动目标的元素，如`$("#draggableElement")`。 2. **添加拖拽行为**：使用`.draggable()`方法为选择的元素添加...
通常，一个jQuery插件会有一个主JS文件，里面包含了所有实现拖动排序功能的代码，以及可能的CSS文件来处理样式和布局。 在实际应用中，使用这样的拖动排序元素jQuery插件通常需要以下步骤： 1. 在HTML文件中引入...
总之，这个"jQuery拖拽排序插件"提供了一个简单且强大的解决方案，使得开发者能够轻松地在网页上实现拖放排序功能，提高了用户与网页的互动性。通过理解和应用这个插件，开发者可以创建更加动态和用户友好的Web应用...
"jQuery拖拽"是jQuery库中的一个功能，允许用户通过简单的API实现元素的拖放功能，使得网页元素可以被轻松地拖动和定位，极大地提升了用户体验。在网页应用中，这种功能常见于各种界面构建工具、日历应用、文件管理...
jQuery拖拽插件是这个库的一个扩展，它允许用户通过鼠标拖动元素来实现各种交互效果，例如在列表或网格中的拖拽排序。本教程将深入讲解如何利用jQuery制作拖拽排序特效，这将极大地提升用户体验，尤其是在数据管理或...
《jQuery拖动拖拽插件draggabilly.pkgd.js详解》 在现代网页开发中，用户交互体验的提升已经成为了一项重要的设计考量。其中，拖放（Drag and Drop）功能作为增强用户交互的一种手段，被广泛应用在各种场景，如文件...
总结来说，"jQuery拖动拖拽插件draggabilly.pkgd.js.zip"提供了一个强大且易于使用的工具，用于在网页中实现元素的拖放功能。通过理解和掌握这个插件的使用，开发者可以轻松地在网页上添加互动性和动态性，提升用户...
jquery插件库大全（200个）： jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 ...jquery拖拽布局 jquery拖放插件 jquery
《jQuery实现拖拽排序插件Sortable.js的深度解析》 在Web开发中，用户交互的体验至关重要，而拖拽排序功能则能极大地提升用户在网页上的操作便捷性。jQuery作为一个广泛使用的JavaScript库，提供了丰富的API和插件...
首先，我们要明确jQuery拖拽插件drag.js的核心功能：它允许用户通过鼠标或触摸事件来拖动DOM元素，实现元素在页面上的自由移动。这在创建可自定义布局、拖放排序列表或者构建交互式界面时非常有用。 拖拽插件的工作...
3. **拖拽功能实现**： - 拖拽功能通常基于鼠标事件（`mousedown`、`mousemove`、`mouseup`）来实现。 - 当用户按下鼠标按钮时记录初始位置，然后在鼠标移动时更新元素的位置。 - 需要限制拖动范围，可能需要计算...