首页 > 代码库 > javascript实现拖曳与拖放图片
javascript实现拖曳与拖放图片
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对象：
| dropEffect属性 | 表示拖放操作的视觉效果，允许设置其值，该效果必须在用effectAllowed属性指定的允许的视觉效果范围之内，允许指定的值有：none,copy,link,move |
| effectAllowed属性 | 用来指定当元素被拖放时所允许的视觉效果，可以指定的值有none,copy,copyLink,copyMove,link,linkMove,move,all,unintialize. |
先了解这些内容对于我们现在这个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></ul>
加上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下载
javascript实现拖曳与拖放图片