实现思路：
①鼠标按下+鼠标移动 → 拖拽
②鼠标松开 → 无拖拽
③鼠标偏移 → 拖拽距离
用JavaScript事件方法表示就是：
① onmousedown + onmousemove → startDrag()
② onmouseup → stopDrag()
drag.js代码：
var params = {left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false
}
//获取相关CSS属性
var getCss = function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]
}
//拖拽的实现
var startDrag = function(bar, target, callback){
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left")
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top")
}
//o是移动对象
bar.onmousedown = function(event){
params.flag = true
if(!event){
event = window.event
//防止IE文字选中
bar.onselectstart = function(){
return false
}
}
var e = event
params.currentX = e.clientX
params.currentY = e.clientY
}
document.onmouseup = function(){
params.flag = false
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left")
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top")
}
}
document.onmousemove = function(event){
var e = event ? event: window.event
if(params.flag){
var nowX = e.clientX, nowY = e.clientY
var disX = nowX - params.currentX, disY = nowY - params.currentY
target.style.left = parseInt(params.left) + disX + "px"
target.style.top = parseInt(params.top) + disY + "px"
}
if (typeof callback == "function") {
callback(parseInt(params.left) + disX, parseInt(params.top) + disY)
}
}
}
HTML/CSS
<style type="text/css">#box{position:absolute left:100px top:100px padding:5px background:#f0f3f9 font-size:12px -moz-box-shadow:2px 2px 4px #666666 -webkit-box-shadow:2px 2px 4px #666666}
#main{border:1px solid #a0b3d6 background:white}
#bar{line-height:24px background:#beceeb border-bottom:1px solid #a0b3d6 padding-left:5px cursor:move}
#content{width:420px height:250px padding:10px 5px}
</style>
<div id="box">
<div id="main">
<div id="bar">拖拽</div>
<div id="content">
内容……
</div>
</div>
</div>
JS部分
<script src="drag.js" type="text/javascript"></script><script type="text/javascript">
var oBox = document.getElementById("box")
var oBar = document.getElementById("bar")
startDrag(oBar, oBox)
</script>
Web Uploader 项目，符合你的要求。
1、引入资源
使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">
<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
<!--SWF在初始化的时候指定，在后面将展示-->
2、Html
首先需要准备一个按钮，和一个用来存放添加的文件信息列表的容器。
<!--dom结构部分--><div id="uploader-demo">
<!--用来存放item-->
<div id="fileList" class="uploader-list"></div>
<div id="filePicker">选择图片</div>
</div>
3、Javascript
创建Web Uploader实例
// 初始化Web Uploadervar uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径
swf: BASE_URL + '/js/Uploader.swf',
// 文件接收服务端。
server: 'http://webuploader.duapp.com/server/fileupload.php',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
})
监听fileQueued事件，通过uploader.makeThumb来创建图片预览图。
PS: 这里得到的是Data URL数据，IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。
// 当有文件添加进来的时候uploader.on( 'fileQueued', function( file ) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img')
// $list为容器jQuery实例
$list.append( $li )
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>')
return
}
$img.attr( 'src', src )
}, thumbnailWidth, thumbnailHeight )
})
然后剩下的就是上传状态提示了，当文件上传过程中, 上传成功，上传失败，上传完成都分别对应uploadProgress, uploadSuccess, uploadError, uploadComplete事件。
// 文件上传过程中创建进度条实时显示。uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span')
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<p class="progress"><span></span></p>')
.appendTo( $li )
.find('span')
}
$percent.css( 'width', percentage * 100 + '%' )
})
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file ) {
$( '#'+file.id ).addClass('upload-state-done')
})
// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error')
// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li )
}
$error.text('上传失败')
})
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove()
})
更多细节，请查看js源码。
<!doctype html><html>
<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="jquery-3.1.1.min.js"></script>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" />
<br><br><img src="" id="img0" width="120">
</form>
</body>
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0])
console.log("objUrl = "+objUrl)
if (objUrl)
{
$("#img0").attr("src", objUrl)
$("#img0").removeClass("hide")
}
})
//建立一个可存取到该file的url
function getObjectURL(file)
{
var url = null
if (window.createObjectURL!=undefined)
{ // basic
url = window.createObjectURL(file)
}
else if (window.URL!=undefined)
{
// mozilla(firefox)
url = window.URL.createObjectURL(file)
}
else if (window.webkitURL!=undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file)
}
return url
}
$('input').on('change',function(){
var value = $(this).val()
value = value.split("\\")[2]
alert(value)
})
</script>
</html>
