html5斜着拖拽,分享html5的一个拖拽手法

*[draggable=true] {-moz-user-select:none;-khtml-user-drag: element;

cursor: move;

}*:-khtml-drag {

background-color: rgba(238,238,238, 0.5);

}

a {

text-decoration: none;

color: #000;

width:120px;

border: 3px dashed #999;

padding: 10px;

display:inline-block;

transition: all 1s;

position:absolute ;

top:10px;

}

.container {

position:relative;

}

a.move {-webkit-transform:scale3d( 1.1, 1.1, 1.1);

}

a:hover:after {

content:\' (drag me)\';

color: green }

var origin, is_moving = false;

$(".container").find("a").on("drop",function(e) {var origin_pos = $(origin).position();

var target_pos =$(e.target).position();

$(origin).addClass("move").animate(target_pos, "fast",function() {

console.log(this);

$(this).removeClass("move");

});

$(e.target).addClass("move").animate(origin_pos, "fast",function() {

$(this).removeClass("move");

});

}).on("dragstart",function(e) {if(is_moving) {return false;

}

is_moving= true;

e.originalEvent.dataTransfer.effectAllowed = \'move\';

origin= this;

}).on("dragover",function(e) {if (e.preventDefault) e.preventDefault(); //

is_moving = false;

e.originalEvent.dataTransfer.dropEffect= \'move\'; //

});