<%@ 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>
分享到:
相关推荐
一款功能非常强大,基于draggabilly.pkgd.js制作的多种拖动效果的jQuery拖动拖拽插件draggabilly.pkgd.js。
基于jquery,利用canvas自带的api,实现了一个鼠标点击对应点后,可拖动的一个插件
jquery实现拖拽排序插件.zip
jQuery拖拽插件制作拖拽排序特效
利用jQuery框架实现最简单的窗口拖拽,轻松实现。
jQuery拖拽插件制作拖拽排序特效是一款非常实用的鼠标拖拽布局插件。
jQuery实现拖拽排序插件Sortable.js.zip
jQuery实现自定义拖拽插件.zip
jQuery拖拽布局插件Portal
这个jquery拖拽插件实现起来非常容易 有相应的demo
用jquery实现的进度条插件,使用非常简单,可用做程序进度显示或AJAX文件上传
jQuery实现支持拖拽对话框插件源码.zip
自己写的拖拽插件,有兴趣的同学可以看一看
jquery拖拽排序插件div自由拖动排序代码
NULL 博文链接:https://just4java.iteye.com/blog/2263347
jquery div拖动排序效果代码是一款打开从左到右慢慢展开,可自由拖动排序特效.
DAD 是一款基于 jQuery 的拖拽拖放插件,它支持常见的水平拖放、垂直拖放、多行拖放、指定拖放区域、回调函数、允许禁止拖放等等,同时你也可以稍加改造,做成类似垃圾篓、购物车等效果。