HTML代码：
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/drag.css" media="all" />
<script src="js/drag.js" type="text/javascript" ></script>
</head>
<body>
<div id="wrapper">
<div id="info"></div>
<div id="control">
<span class="tab">Add a tab:</span>
<span class="button"></span>
</div>
<div class="dragger">
<div class="title" name="title">
<span class="hd">The first one</span>
<span class="close" ></span>
</div>
<p class="content">
Low prices on digital cameras, MP3, sports equipment, books, music, DVDs, video games, home garden and much more. Free UK delivery on Amazon orders.
</p>
</div>
</div>
</body>
</html>
javascript代码：
drag.js
var dragging = false;
var x;
var y;
var xr; /* the position of the mouse pointer in the dragger */
var yr; /* the position of the mouse pointer in the dragger */
var info;
var dragger;
window.onload = load;
function load() {
var targets = document.getElementsByName("title");
var target = targets[0];
dragger = target.parentNode;
target.onmousedown = down;
document.onmouseup = up;
target.onmousemove = move;
/* dragger = target.parentNode; */
}
function down(ev) {
ev = ev || window.event;
dragging = true;
xr = ev.layerX || ev.offsetX;
yr = ev.layerY || ev.offsetY;
/* p.innerHTML +="x: " + xr + ", " + "y: " + yr + "\n"; */
}
function up(ev) {
ev = ev || window.event;
dragging = false;
/* dragger = null; */
}
function move(ev) {
ev = ev || window.event;
if(dragging == true) {
x =ev.clientX - xr;
y =ev.clientY - yr;
dragger.style.left = x + "px";
dragger.style.top = y + "px";
/* p.innerHTML +="x: " + x + ", " + "y: " + y + " "; */
}
}
document.onclick = monitor;
function monitor(ev) {
ev = ev || window.event;
var target = ev.target || ev.srcElement;
info = document.getElementById("info");
if(target.className=="close") {
dragger = target.parentNode.parentNode;
dragger.style.display="none";
}
else if(target.className=="button"){
var wrapper = document.getElementById("wrapper");
wrapper.innerHTML += "<div class=\"dragger\"><div class=\"title\"><span class=\"hd\">The first one</span><span class=\"close\" ></span></div><p class=\"content\">Low prices on digital cameras, MP3, sports equipment, books, music, DVDs, video games, home garden and much more. Free UK delivery on Amazon orders.</p>";
/* alert(wrapper.innerHTML); */
}
}
CSS代码
drag.css
/* =====================RESET CSS=====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ========================================== */
.dragger, .title {
border-radius:17px 17px 0 0;
}
.dragger {
width:300px;
height:300px;
border:1px #e3e3e3 dotted;
position:absolute;
top:200px;
left:500px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.dragger {
background: rgb(195,217,255);
background: -moz-linear-gradient(top, rgba(195,217,255,1) 0%, rgba(177,200,239,1) 41%, rgba(152,176,217,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(195,217,255,1)), color-stop(41%,rgba(177,200,239,1)), color-stop(100%,rgba(152,176,217,1)));
background: -webkit-linear-gradient(top, rgba(195,217,255,1) 0%,rgba(177,200,239,1) 41%,rgba(152,176,217,1) 100%);
background: -o-linear-gradient(top, rgba(195,217,255,1) 0%,rgba(177,200,239,1) 41%,rgba(152,176,217,1) 100%);
background: -ms-linear-gradient(top, rgba(195,217,255,1) 0%,rgba(177,200,239,1) 41%,rgba(152,176,217,1) 100%);
background: linear-gradient(top, rgba(195,217,255,1) 0%,rgba(177,200,239,1) 41%,rgba(152,176,217,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d9ff', endColorstr='#98b0d9',GradientType=0 );
}
.title {
width:100%;
height:40px;
cursor:pointer;
}
.title {
background: rgb(117,183,244);
background: -moz-linear-gradient(top, rgba(117,183,244,1) 0%, rgba(71,158,229,1) 24%, rgba(10,124,211,1) 51%, rgba(39,139,221,1) 80%, rgba(53,151,232,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(117,183,244,1)), color-stop(24%,rgba(71,158,229,1)), color-stop(51%,rgba(10,124,211,1)), color-stop(80%,rgba(39,139,221,1)), color-stop(100%,rgba(53,151,232,1)));
background: -webkit-linear-gradient(top, rgba(117,183,244,1) 0%,rgba(71,158,229,1) 24%,rgba(10,124,211,1) 51%,rgba(39,139,221,1) 80%,rgba(53,151,232,1) 100%);
background: -o-linear-gradient(top, rgba(117,183,244,1) 0%,rgba(71,158,229,1) 24%,rgba(10,124,211,1) 51%,rgba(39,139,221,1) 80%,rgba(53,151,232,1) 100%);
background: -ms-linear-gradient(top, rgba(117,183,244,1) 0%,rgba(71,158,229,1) 24%,rgba(10,124,211,1) 51%,rgba(39,139,221,1) 80%,rgba(53,151,232,1) 100%);
background: linear-gradient(top, rgba(117,183,244,1) 0%,rgba(71,158,229,1) 24%,rgba(10,124,211,1) 51%,rgba(39,139,221,1) 80%,rgba(53,151,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75b7f4', endColorstr='#3597e8',GradientType=0 );
}
.hd {
display:block;
padding:8px 0 5px 12px;
font-size:130%;
font-weight:bold;
float:left;
color:#FFF;
line-height:120%;
text-shadow:-1px -1px 2px #162e16, 2px 2px 3px #162e16;
}
.title .close {
width:40px;
height:40px;
vertical-align:middle;
float:right;
background:url(../img/close.png);
cursor:pointer;
}
.content {
padding:15px 10px;
font-size:120%;
color:#000;
line-height:120%;
}
#control {
width:260px;
height:50px;
margin:50px 0 0 50px;
}
#control span {
display:block;
}
.tab {
width:130px;
float:left;
font-size:150%;
font-weight:bold;
line-height:200%;
}
.button {
float:left;
height:49px;
width:123px;
cursor:pointer;
background:url(../img/button.png);
}
/* ========================= clearfix =============================== */
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after{
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.clearfix:after{
clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix{
zoom: 1;
}
分享到：
相关推荐
JQuery 拖拽功能是基于 jQuery UI 库的一个强大特性，它允许用户通过鼠标操作元素在页面上自由移动，增强了交互性和用户体验。在实现拖拽效果时，我们需要引入 jQuery UI 的相关库，包括 `jquery.ui.core`, `jquery....
资源名称：jquery1.7 中文手册 CHM文档(附jquery1.82 chm手册)内容简介：因国内jquery中文手册更新太慢了,等了一段时间实在等不下去了,干脆自己动手做一个丰衣足食,时刻更新. 最后感谢Shawphy提供1.4.1版,jehn提供...
**jQuery文档预览功能插件详解** 在网页开发中，为用户提供便捷的文档预览功能是提高用户体验的重要一环。jQuery作为一个广泛使用的JavaScript库，提供了许多便利的插件来简化这种功能的实现。本篇文章将深入讲解...
下面是一个基础的拖拽功能实现： ```javascript $(document).ready(function() { // 选择需要拖动的元素，例如一个div var $draggableElement = $('#draggable'); // 鼠标按下时，记录初始位置 $...
通过查阅此文档，开发者可以快速理解和掌握jQuery 1.7中的每一个功能，如如何选择DOM元素、执行DOM操作、处理事件、进行AJAX请求等。同时，它还包含了对新特性、改进和已知问题的说明，对于开发过程中遇到的问题，这...
《jQuery中文文档1.8和1.4的chm文档》是两个版本的jQuery官方文档的中文翻译版，主要用于帮助开发者理解和使用这个广泛应用于Web开发的JavaScript库。jQuery以其简洁的API和强大的功能，极大地简化了DOM操作、事件...
jQuery版本及jQuery帮助文档的压缩包里有：jquery-1.2.2.min到jquery-2.1.3.min的版本，还有jQuery1.10.3帮助文档，jQuery1.11.0帮助文档，jQuery1.7.1帮助文档，jquery1.7.2帮助文档，jquery1.8.3帮助文档。
这是一套关于jQuery EasyUI的中文帮助文档，在线帮助文档 进行整理，生成chm文件，便于开发时或者离线对jquery easyi控 件的属性、文法、事件等内容的查看。 jQuery EasyUI 版本1.9.4。文档为chm格式，方便开发...
在本文中，我们将深入探讨如何使用jsPlumb和jQuery UI库构建一个基于Web的流程设计器，该设计器具有拖拽功能，并适用于多种主流浏览器。这个工具对于业务流程建模、工作流设计以及任何需要图形化表示流程的应用场景...
这个中文帮助文档是针对jQuery UI的详细指南，旨在帮助开发者更好地理解和使用这个强大的工具集。 ### 1. jQuery UI 的主要功能 jQuery UI 包含了多种功能模块，包括但不限于： - **TABS（选项卡）**: 提供了一种...
2. **链式调用（Chaining）**：jQuery对象允许连续调用多个方法，如`$("#myDiv").css("color", "red").hide()`，这会先设置元素颜色为红色，然后将其隐藏。 3. **DOM操作（DOM Manipulation）**：jQuery提供了便捷...
jquery文档jquery文档jquery文档jquery文档jquery文档jquery文档jquery文档jquery文档jquery文档jquery文档jquery文档jquery文档jquery文档jquery文档
在这个离线版的jQuery 1.1中文文档中，用户可以深入理解其API和功能。 1. **基本概念** - **选择器**：jQuery 的核心在于强大的选择器功能，允许开发者通过CSS样式选择页面上的元素，如 `$("#id")` 选择ID为id的...
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用...
"jquery实现简单图片的拖动"这个主题是关于如何利用jQuery的API来实现图片元素的拖放功能，这是一个常见的交互设计，使得用户可以通过鼠标拖动图片在页面上自由移动。 在jQuery中，实现图片拖动主要涉及到`...
本资源集合包含了从jQuery 1.4到jQuery 1.8的多个版本的API帮助文档，对于深入理解和使用jQuery具有极大的价值。 首先，jQuery 1.4版本引入了许多改进和新功能。例如，$.proxy()函数允许开发者为事件处理函数绑定...
这些文档详细列出了每个函数、方法和属性，是学习和查阅jQuery功能的好资源。开发者可以通过查阅这些CHM文件，了解具体API的用法，解决开发过程中遇到的问题。 总之，jQuery是一个强大且广泛使用的JavaScript库，它...
这篇文档将深入探讨jQuery的核心功能及API用法，帮助你更好地理解和运用这个强大的工具。 1. **选择器（Selectors）** jQuery的选择器基于CSS，允许你快速准确地选取页面中的元素。例如，`$("#id")`用于选取ID为...
总的来说，"jQuery1.11.0_中文版文档"是一个全面且易于理解的学习资料，无论你是JavaScript新手还是经验丰富的开发者，都能从中受益。通过深入学习和实践，你可以利用jQuery的强大功能提高网页开发的效率和用户体验...
jQuery Easy UI 是一个基于jQuery的前端开发框架，它提供了丰富的UI组件，使得开发者能够快速构建出美观且功能强大的Web应用。离线API文档是开发者在无网络环境下查阅和学习jQuery Easy UI的重要资源，而其中包含的...