jquery实现Tdrag拖拽排序效果代码
代码语言：html
所属分类：拖放
代码描述：jquery实现Tdrag拖拽排序效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
*{margin:0;padding:0}.one{width:100px;height:100px;margin:20px;background:transparent url(//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90) no-repeat}.boxList{border:1px solid #f03;height:550px;margin:30px;position:relative;width:500px}.div1{width:200px;height:200px;position:absolute;margin:20px;float:right;background:transparent url(//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90) no-repeat;top:50px;right:100px}.div2{width:200px;height:200px;position:absolute;margin:20px;float:right;background:transparent url(//repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90) no-repeat;right:350px;top:400px}.ddd{width:1000px;height:600px;border:1px solid #f03;position:relative;margin-left:100px;margin-top:100px;top:100px;left:100px}.title{background:#399;height:20px;width:100%;color:#eee;text-align:center;cursor:move}img{width:100%;height:80%}.tezml{border:3px #f03 dashed}.box{margin:50px;padding:30px;background:#eee}.head h1{font-size:60px;font-weight:bolder}.head h3{line-height:50px}hr{margin-top:20px}.child_hr{color:#006cbf}.example_one{height:600px}.example_one .code{float:left;width:45%}.example_one .example{float:right;border-left:1px solid #ccc;width:45%;height:620px}h2{color:#006cbf;margin:50px 0 0 20px}.onlyX{top:40%}.onlyY{left:45%}.div7{bottom:0}.div8{float:left}.div9{float:left}.div10{float:left}.div11{float:left}.div12{float:left}.div13{float:left}.abc{border:2px solid blue}input{margin-left:50px}.h800{height:800px}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Tdrag.js"></script>
</head>
<body>
<div class="box">
<div class="head">
<h1>Tdrag</h1>
<h3>Tdrag属于拖拽类的一款插件，基于jquery而成，兼容1.4以上版本的jquery，兼容浏览器：chrome、firfox、IE7等以上主流浏览器</h3>
<div class="div1"></div>
</div>
<hr />
<div class="example_one">
<div class="code">
<h2>插件加载</h2>
<hr class="child_hr" />
<div id="highlighter_654124" class="syntaxhighlighter xml">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter"><div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div></td>
<td class="code"><div class="container">
<div class="line number1 index0 alt2"><code class="xml plain"><</code><code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"JavaScript/jquery1.7.2.js"</code><code class="xml plain">></</code><code class="xml keyword">script</code><code class="xml plain">></code></div>
<div class="line number2 index1 alt1"><code class="xml plain"><</code><code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"JavaScript/Tdrag.js"</code><code class="xml plain">></</code><code class="xml keyword">script</code><code class="xml plain">></code></div>
</div></td>
</tr>
</tbody>
</table>
</div>
<h4>插件调用</h4>
<h5>html代码:</h5>
<div id="highlighter_103593" class="syntaxhighlighter xml">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter"><div class="line number1 index0 alt2">1</div></td>
<td class="code"><div class="container">
<div class="line number1 index0 alt2"><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"div1"</code><code class="xml plain">></</code><code class="xml keyword">div</code><code class="xml plain">></code></div>
</div></td>
</tr>
</tbody>
</table>
</div>
<h5>js代码:</h5>
<div id="highlighter_120303" class="syntaxhighlighter js">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter"><div class="line number1 index0 alt2">1</div></td>
<td class="code"><div class="container">
<div class="line number1 index0 alt2"><code class="js plain">$(</code><code class="js string">".div1"</code><code class="js plain">).Tdrag();</code></div>
</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="example">
<div class="div2"></div>
</div>
</div>
<hr />
<div class="example_one">
<div class="code">
<h2>父级限制</h2>
<hr class="child_hr" />
<h5>html代码:</h5>
<div id="highlighter_824945" class="syntaxhighlighter xml">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter"><div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div></td>
<td class="code"><div class="container">
<div class="line number1 index0 alt2"><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"boxList"</code><code class="xml plain">></code></div>
<div class="line number2 index1 alt1"><code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"div3"</code><code class="xml plain">></</code><code class="xml keyword">div</code><code class="xml plain">></code></div>
<div class="line number3 index2 alt2"><code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code></div>
</div></td>
</tr>
</tbody>
</table>
</div>
<h5>js代码:</h5>
<div id="highlighter_364855" class="syntaxhighlighter js">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter"><div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div></td>
<td class="code"><div class="container">
<div class="line number1 index0 alt2"><code class="js plain">$(</code><code class="js string">".div3"</code><code class="js plain">).Tdrag({</code></div>
<div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain">scope:</code><code class="js string">".boxList"</code></div>
<div class="line number3 index2 alt2"><code class="js plain">});</code></div>
</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="example">
<div class="boxList">
<div class="one div3"></div>
</div>
</div>
</div>
<hr />
<div class="example_one">
<div class="code">
<h2>拖拽规范网格</h2>
<hr class="child_hr" />
<h5>html代码:</h5>
<div id="highlighter_824945" class="syntaxhighlighter xml">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter"><div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div></td>
<td class="code"><div class="container">
<div class="line number1 index0 alt2"><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"boxList"</code><code class="xml plain">></code></div>
<div class="line number2 index1 alt1"><code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"div4"</code><code class="xml plain">></</code><code class="xml keyword">div</code><code class="xml plain">></code></div>
<div class="line number3 index2 alt2"><code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code></div>
</div></td>
</tr>
</tbody>
</table>
</div>
<h5>js代码:</h5>
<div id="highlighter_135300" class="syntaxhighlighter js">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter"><div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div></td>
<td class="code"><div class="container">
<div class="line number1 index0 alt2"><code class="js plain">$(</code><code class="js string">".div4"</code><code class="js plain">).Tdrag({</code></div>
<div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain">scope:</code><code class="js string">".boxList"</code><code class="js plain">,</code></div>
<div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">grid:[50,50]</code></div>
<div class="line number4 index3 alt1"><code class="js plain">});</code></div>
<div class="line number5 index4 alt2"><code class="js spaces"> </code> </div>
</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="example">
<div class="boxList">
<div class="one div4"></div>
</div>
</div>
</div>
<hr />
<div class="example_one">
<div class="code">
<h2>X轴拖拽或者Y轴拖拽</h2>
<hr class="child_hr" />
<h5>html代码:</h5>
<div id="highlighter_280749" class="syntaxhighlighter xml">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter"><div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div></td>
<td class="code"><div class="container">
<div class="line number1 index0 alt2"><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"boxList"</code><code class="xml plain">></code></div>
<div class="line number2 index1 alt1"><code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"one onlyX"</code><code class="xml plain">></</code><code class="xml keyword">div</code><code class="xml plain">></code></div>
<div class="line number3 index2 alt2"><code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"one onlyY"</code><code class="xml plain">></</code><code class="xml keyword">div</code><code class="xml plain">></code></div>
<div class="line number4 index3 alt1"><code class="xml plain"></</code><code class="xml keyword">div</code><code class="xml plain">></code></div>
</div></td>
</tr>
</tbody>
</table>
</div>
<h5>js代码:</h5>
<div id="highlighter_179701" class="syntaxhighlighter js">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter"><div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div></td>
<td class="code"><div class="container">
<div class="line number1 index0 alt2"><code class="js plain">$(</code><code class="js string">".onlyX"</code><code class="js plain">).Tdrag({</code></div>
<div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain">scope:</code><code class="js string">".boxList"</code><code class="js plain">,</code></div>
<div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">axis:</code><code class="js string">"x"</code></div>
<div class="line number4 index3 alt1"><code class="js plain">});</code></div>
<div class="line number5 index4 alt2"><code class="js plain">$(</code><code class="js string">".onlyY"</code><code class="js plain">).Tdrag({</code></div>
<div class="line number6 index5 alt1"><code class="js spaces"> </code><code class="js plain">scope:</code><code class="js string">".boxList"</code><code class="js plain">,</code></div>
<div class="line number7 index6 alt2"><code class="js spaces"> </code><code class="js plain">axis:</code><code class="js string">"y"</code></div>
<div class="line number8 index7 alt1"><code class="js plain">});</code></div>
</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="example">
<div class="boxList">
<div class="one onlyX"></div>
<div class="one onlyY"></div>
</div>
</div>
</div>
<hr />
<div class="example_one">
<div class="code">
<h2>记住位置</h2>
<hr class="child_hr" />
<h5>html代码:</h5>
<div id="highlighter_143523" class="syntaxhighlighter xml">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter"><div class="line number1 index0 alt2">1</div></td>
<td class="code"><div class="container">
<div class="line number1 index0 alt2"><code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"one div5"</code><code class="xml plain">></</code><code class="xml keyword">div</code><code class="xml plain">></code></div>
</div></td>
</tr>
</tbody>
</table>
</div>
<h5>js代码:</h5>
<div id="highlighter_453333" class="syntaxhighlighter js">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter"><div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div></td>
<td class="code"><div class="container">
<div class="line number1 index0 alt2"><code class="js plain">$(</code><code class="js string">".div5"</code><code class="js plain">).Tdrag({</code></div>
<div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain">pos:</code><code class="js keyword">true</code></div>
<div class="line number3 index2 alt2"><code class="js plain">});</code></div>
</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="example">
<div class="one div5"></div>
</div>
</div>
<hr />
<div class="example_one">
<div class="code">
<h2>拖拽块内指定区域</h2>
<hr class="child_hr" />
<h5>html代码:</h5>
<div id="highlighter_441384" class="syntaxhighlighter xml">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter"><div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div></td>
<td class="code"><div class="container">
<div class="line number1 index0 alt2"><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"boxList"</code><code class="xml plain">></code></div>
<div class="line number2 index1 alt1"><code class="xml spaces"> </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"one div6"</code><code class="xml plain">></code></div>
<div class="line number3 index2 alt2"><code class="xml spaces">&nb.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0