jQuery鼠标拖拽插件tinyDraggable js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标拖拽插件tinyDraggable js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery鼠标拖拽插件tinyDraggable</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin: 0; padding: 0; border: 0; min-width: 320px; color: #777; }
html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.02em; }
p, td { line-height: 1.5; }
ul { padding: 0 0 0 20px; }

th { background: #eee; white-space: nowrap; }
th, td { padding: 10px; text-align: left; vertical-align: top; font-size: .9em; font-weight: normal; border-right: 1px solid #fff; }
td:first-child { white-space: nowrap; color: #008000; width: 1%; font-style: italic; }

h1, h2, h3 { color: #4b4b4b; font-family: "Source Sans Pro", sans-serif; font-weight: 300; margin: 0 0 1.2em; }
h1 { font-size: 4.5em; color: #1f8dd6; margin: 0 0 .4em; }
h2 { font-size: 2em; color: #636363; }
h3 { font-size: 1.8em; color: #4b4b4b; margin: 1.8em 0 .8em }
h4 { font: bold 1em sans-serif; color: #636363; margin: 4em 0 1em; }
a { color: #4e99c7; text-decoration: none; }
a:hover { text-decoration: underline; }
p, pre { margin: 0 0 1.2em; }
::selection { color: #fff; background: #328efd; }
::-moz-selection { color: #fff; background: #328efd; }

@media (max-width:480px) {
	h1 { font-size: 3em; }
	h2 { font-size: 1.8em; }
	h3 { font-size: 1.5em; }
	td:first-child { white-space: normal; }
}

.inline-code { padding: 1px 5px; background: #eee; border-radius: 2px; }
pre { padding: 15px 10px; font-size: .9em; color: #555; background: #edf3f8; }
pre i { color: #aaa; } /* comments */
pre b { font-weight: normal; color: #cf4b25; } /* strings */
pre em { color: #0c59e9; } /* numeric */

/* Pure CSS */
.pure-button { margin: 5px 0; text-decoration: none !important; }
.button-lg { margin: 5px 0; padding: .65em 1.6em; font-size: 105%; }

/* tinyDraggable styles */
.draggable_container { position: relative; max-width: 760px; margin: auto; height: 180px; }
.obj { position: absolute; background: #ddd; padding: 20px; text-align: center; cursor: move; }
#item1, #item2 .handle, #item3 { cursor: move; color: #fff; background: #6ba72b; }
#item2 .handle, .obj .exclude_me { padding: 10px; border-radius: 2px; }
.obj .exclude_me { color: #777; background: #ddd; cursor: text; }
</style>
</head>
<body>
<div style="margin:30px 0;padding:20px 5px">
	<div class="draggable_container">
		<div id="item1" class="obj" style="top:0;left:0;min-width:90px">点击我进行拖动</div>
		<div id="item2" class="obj" style="top:0;left:220px;min-width:120px;cursor:text">
			<p>选择拖动处理</p>
			<div class="handle">点击我进行拖动</div>
		</div>
		<div id="item3" class="obj pure-form" style="top:0;left:500px">
			<p>排除处理</p>
			<p><input type="text" value="排除文本输入…"></p>
			<div class="exclude_me">排除元素</div>
		</div>
	</div>
</div>
<div id="fb-root"></div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.tiny-draggable.js"></script>
<script>
$('#item1').tinyDraggable();
$('#item2').tinyDraggable({ handle: '.handle' });
$('#item3').tinyDraggable({ exclude: '.exclude_me, input' });
</script>
</body>
</html>

JS代码(jquery.tiny-draggable.min.js):

// jQuery tinyDraggable v1.0.2// https://github.com/Pixabay/jQuery-tinyDraggable!function(e){
	e.fn.tinyDraggable=function(n){
	var t=e.extend({
	handle:0,exclude:0}
,n);
	return this.each(function(){
	var n,o,u=e(this),a=t.handle?e(t.handle,u):u;
	a.on({
	mousedown:function(a){
	if(!t.exclude||!~e.inArray(a.target,e(t.exclude,u))){
	a.preventDefault();
	var f=u.offset();
	n=a.pageX-f.left,o=a.pageY-f.top,e(document).on("mousemove.drag",function(e){
	u.offset({
	top:e.pageY-o,left:e.pageX-n}
)}
)}
}
,mouseup:function(){
	e(document).off("mousemove.drag")}
}
)}
)}
}
(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)