图片拖放轻松实现相册内容组织，HTML5 实现

Question

本帖最后由 liusoft 于 2012-07-17 16:48:34 编辑

Answer 1

var aImgs = [
    'http://static.oschina.net/uploads/space/2012/0709/105428_4aoW_28.jpg',
    'http://static.oschina.net/uploads/space/2012/0607/142131_2PqS_28.jpg',
    'http://www.oschina.net/img/events/shenzhen-20120526.jpg',
    'http://www.oschina.net/img/events/chengdu-20120415.jpg',
    'http://www.oschina.net/img/events/shanghai-20120107.jpg',
    'http://www.oschina.net/img/events/shenzhen-20111210.jpg',
    'http://www.oschina.net/img/events/zhuhai-20111105.jpg',
    'http://www.oschina.net/img/events/shenzhen-20110626.jpg',
  'http://static.oschina.net/uploads/space/2012/0709/105428_4aoW_28.jpg',
    'http://static.oschina.net/uploads/space/2012/0607/142131_2PqS_28.jpg',
    'http://www.oschina.net/img/events/shenzhen-20120526.jpg',
    'http://www.oschina.net/img/events/zhuhai-20111105.jpg'
];
$(function(){
  $(".gallery").find("img").each(function(idx){
    $(this).attr("src",aImgs[idx]);
  });
});// add event handler
var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();// inner variables
var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');// preventDefault (stops the browser from redirecting off to the text)
function cancel(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }
  return false;
}// update event handlers
function updateDataTransfer() {
    dragItems = document.querySelectorAll('[draggable=true]');
    for (var i = 0; i < dragItems.length; i++) {
        addEvent(dragItems[i], 'dragstart', function (event) {
            event.dataTransfer.setData('obj_id', this.id);
            return false;
        });
    }
}// dragover event handler
addEvent(dropAreas, 'dragover', function (event) {
    if (event.preventDefault) event.preventDefault();    // little customization
    this.style.borderColor = "#000";
    return false;
});// dragleave event handler
addEvent(dropAreas, 'dragleave', function (event) {
    if (event.preventDefault) event.preventDefault();    // little customization
    this.style.borderColor = "#ccc";
    return false;
});// dragenter event handler
addEvent(dropAreas, 'dragenter', cancel);// drop event handler
addEvent(dropAreas, 'drop', function (event) {
    if (event.preventDefault) event.preventDefault();    // get dropped object
    var iObj = event.dataTransfer.getData('obj_id');
    var oldObj = document.getElementById(iObj);    // get its image src
    var oldSrc = oldObj.childNodes[0].src;
    oldObj.className += 'hidden';    var oldThis = this;    setTimeout(function() {
        oldObj.parentNode.removeChild(oldObj); // remove object from DOM        // add similar object in another place
        oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /></a>';        // and update event handlers
        updateDataTransfer();        // little customization
        oldThis.style.borderColor = "#ccc";
    }, 500);    return false;
});

Answer 2

收藏了。最近正好在学习html5的东东