javascript实现拖曳与拖放图片
其实对于drag和drop拖曳与拖放事件IE很早以前就支持这个操作了，我们先来看看HTML5中新增的拖放API。
在HTML5中想要实现拖放操作，至少要做以下操作：
1. 将要拖放的对象元素的draggable属性设置为true，即(draggable="true"),这样才能拖放该元素，且img元素与a元素(必须指定href)默认允许拖放操作。如代码：
<li draggable="true">Item 1</li>
2. 编写与拖放有关的事件处理代码，有以下事件需要我们知道的。如下：
1):
dragstart:
当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上.
2):
drag:
拖放过程中触发的事件，此事件作用在被拖放到元素上。
3):
dragenter:
拖放元素进入目标元素触发的事件，此事件作用在目标元素上。
4):
dragover:
拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上.
5):
dragleave:
被拖放到元素离开目标元素的时候，此事件作用在目标元素上。
6):
drop:
有其他元素被拖放到目标元素上，此事件作用在目标元素上。
7):
dragend:
拖放操作结束：此事件作用在拖放元素上。
3. DataTransfer对象：
先了解这些内容对于我们现在这个demo来说已经够了！具体的想多了解可以去看看HTML5中的拖放与拖曳API。
我们可以先来看看JSFiddler中的效果：
你可以狠狠的点击这里：
javascript实现拖放与拖曳图片的DEMO
所有的JS代码如下：
* javascript拖放元素
function
Sortable(cfg){
this
.cfg = $.extend({},defaults,cfg ||
{});
this
._init();
$.extend(Sortable.prototype,{
//
函数初始化
_init:
function
(){
var
self =
this
;
var
cfg =
self.cfg;
if
(cfg.container ==
null
) {
return
;}
var
placeholders =
$(),
dragging;
//
该容器下的子元素
$(cfg.container).each(
function
(index,curItem){
var
items =
$(curItem).children();
var
placeholder = $('<' + items[0].tagName + ' class="sortable-placeholder">'
);
placeholders
=
placeholders.add(placeholder);
items.attr(
"draggable","true").on('dragstart',
function
(e){
var
dt =
e.originalEvent.dataTransfer;
dt.effectAllowed
= 'move'
;
index
= (dragging = $(
this
)).index();
}).on(
'dragend',
function
(e){
dragging.fadeIn();
placeholders.detach();
}).not(
'a[href], img').on('selectstart',
function
() {
//
禁止鼠标选中文字
this
.dragDrop &&
this
.dragDrop();
return
false
;
}).end().add([
this
, placeholder]).on("dragover dragenter drop",
function
(e){
if
(e.type == 'drop'
) {
e.stopPropagation();
placeholders.filter(
':visible'
).after(dragging);
return
false
;
e.preventDefault();
e.originalEvent.dataTransfer.dropEffect
= 'move'
;
if
(items.is(
this
)) {
dragging.hide();
$(
this
)[placeholder.index() < $(
this
).index() ? 'after' : 'before'
](placeholder);
placeholders.not(placeholder).detach();
return
false
;
var
defaults =
{
container :
null
代码初始化如下：
new Sortable({
"container": '.demoList'
container：是指要拖放的容器。其他任何操作不需要，html代码还是和往常一样书写，至于draggable="true"这个属性，JS里面会自动为当前容器的子元素增加这个属性，所以对于使用者可以不用关心这些细节的操作；比如上面的demo HTML代码 可以和往常一样写：
如HTML代码如下：
<ul class="connected list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
加上CSS如下：
h1, h2 {
text-align: center;
font-weight: normal;
.connected li, .sortable li{
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
font-family: "Tahoma";
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
li.highlight {
background: #FEE25F;
.connected {
float: left;
width: 200px;
.connected.no2 {
float: right;
li.sortable-placeholder {
border: 1px dashed #CCC;
background: none;
复制上面的JS，然后代码初始化就这样，就ok了 如下初始化：
new Sortable({
"container": '.connected'
demo下载
