先贴上源代码地址，点击获取。然后直接进入主题啦，当然，如果你觉得我有哪里写的不对或者欠妥的地方，欢迎留言指出。在附上一些代码之前，我们还是先来了解下，上传文件的时候需要利用的一些必要的知识。 首先我们要说的就是FileReader对象，这是一个HTML5提出的，专门用来异步的读取用户计算机上文件的对象，这里有详细的介绍。所以如果我们想要使用它，那么首先我们得先创建一个FileReader对象。 var fr = new FileReader() 1...
本文实例讲述了jQuery实现拖拽页面元素并将其保存到cookie的方法。分享给大家供大家参考，具体如下： 实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中 好了,开始 1.准备工作 a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张) 2.页面 上代码 <div class="img_list" id="img_list"> <div id="baidu"><img src="img/baidu.jpg"...
效果说明：配合已有CSS样式，载入插件后，网页元素可以随意在窗口内拖拽，设置了原位置半透明和拖拽半透明的效果选项，可根据需要选择。另外，当页面上有多个可拖拽元素时，可以载入另外一个用于设置z-index的插件，模拟Windows窗口点击置顶效果。js/jquery.jLdraggable.js： ;(function($){$.fn.extend({"jLzindex" : function(){ //用于判断和设置各个对话框的z-indexvar $dragIndex = $(this);var arrzIndex = new Array();for(...
本文实例讲述了jQuery自定义图片缩放拖拽插件imageQ实现方法。分享给大家供大家参考，具体如下： 综合网上一些代码 自己写的一个图片缩放拖拽的小插件 /**** <a href="http://lib.csdn.net/base/22" class=replace_word title="jQuery知识库" target=_blank style=color:#df3434; font-weight:bold;>jQuery</a> imageQ plugin* @name jquery-imageQ.js* @author Q* @date 2011-01-19* maxRatio 最大放大比例* minRatio 最小缩小比例...
1.引入文件 <script src="{sh::PUB}js/jquery-1.10.1.min.js"></script> <link rel="stylesheet" href="Public/css/jquery-ui.min.css"> <script src="{sh::PUB}js/jquery-ui.min.js"></script>2.给元素附上sortable类 <tbody class="sortable"><tr></tr><tr></tr> </tbody>3.开启并配置 $(function() {$(".sortable").sortable({cursor: "move",items: "tr", //只是tr可以拖动opacity: 0.6, //拖动时，透明度为0.6revert: true, ...
本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码，供大家参考，具体内容如下 实现以下效果完全拖出这个层，图片会消失，否则图片会回到原来的位置<html> <head><title></title><style type="text/css">#mydiv{ width:900px; background-color:#444; border:1px solid red}#mydiv2{ width:900px;; border:1px solid red}img{ width:200px; height:200px;}ul{ list-style-type:none;}ul li{ display:inline;}</style>...
本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法。分享给大家供大家参考，具体如下： 该插件是文章作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。 此插件旨在实现目前较为流行的拖拽改变元素大小的效果，您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高。整体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/...
使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件。效果图如下：效果演示 源码下载 html代码：<h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><span>2</span></div> <div class="item item3"><span>3</span></div> <div class="item item4"><span>4</span></div> <div class="item item5"><span>5</span></div> </div> <script src...
本文实例讲述了jQuery实现元素拖拽并cookie保存顺序的方法。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> div { border: 1px solid red; } #myList { padding-top: 20px; width: 500px; backgroun...
本文实例分析了jQuery实现div拖拽效果。分享给大家供大家参考，具体如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <style type="text/css"> /*模块拖拽*/ .drag{position:absolute;width:100px;height:100px;border:1px solid #ddd;backgrou...
本文实例讲述了jquery拖拽排序简单实现方法。分享给大家供大家参考，具体如下： 运行效果截图如下：原来没有新建动作，分析代码后发现很容易增强~~ 代码如下： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试的拖拽功能</title> <style type="text/css"> body, div { margin: 0; paading: 0; font-size: 12px; } body { width:100%; margin: 0 auto; } ul, li...
本文实例讲述了jquery实现可旋转可拖拽的文字效果代码。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下： <html><head><title>test</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" >function scaleXBlock(blocker, scaleX){blocker.css({"-moz-transform": scaleX( + scaleX + ) ,"-w...
本文实例讲述了jQuery div拖拽用法。分享给大家供大家参考，具体如下： 这里需要引用好jquery 和 jqueryui两个包： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery1.8.3.js"></script> <script src="jquery-...
本文实例讲述了jquery实现的拖拽效果。分享给大家供大家参考，具体如下： 运行效果截图如下：点击此处查看在线演示效果。 具体代码如下： html部分： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="tuo.js"></script> <script type="text/jav...
本文实例讲述了jquery利用拖拽方式在图片上添加热链接的实现过程，分享给大家供大家参考。具体如下： 运行效果截图如下：项目的需求，要在一张图片上加不同的链接，比如说，图片是一个套房，里面有沙发，茶几，酒柜，电视柜等，然后在这些物件上加一个超链接，点击后打开相关产品的介绍。 用jquery写了一个在图片添加锚点的功能，实现的原理：一个文本框写入标题，一个文本框写链接，一个添加按钮，一个编辑按钮，当写好内容后点击...