公司让写一个仿手机APP 拖拽添加的功能,我只写了拖拽,原本以为只要再写一个碰撞检测把拖动的div放到连个图标中间就行了,但是发现拖动div最后的位置,APP图标的位置不会处理?
drag_append:function(){
var self = this;
var appender = null;
$('.lis').on('mousedown',function(event){
var e = window.event||arguments[0];
event.preventDefault();
var niu = $(this).clone();
var a = self.pic_change(niu.html());
appender = $(a);
var cur_Pos = $(this).offset();
$('#for_drag').append(appender);//拖动的div
$('#for_drag').css({'display':'block','top':cur_Pos.top,'left':cur_Pos.left,'position':'absolute'});
$('#for_drag').css({'width':'140px','height':'132px','z-index':'51'});
$('#for_drag').trigger(event);
$('#for_drag').css('z-index','51');
var posX = $('#for_drag').offset().left;
var posY = $('#for_drag').offset().top;
$(document).bind('mousemove',function(){
var e = window.event||arguments[0];
event.preventDefault();
e.stopPropagation();
var Nposx = e.clientX - posX;
var Nposy = e.clientY - posY;
var for_drag_inner = $('#for_drag').html();
$('#for_drag').css({'top':(Nposy+'px'),'left':(Nposx+'px')});
var t1 = $('#for_drag').offset().top;
var b1 = $('#for_drag').height()+t1;
var l1 = $('#for_drag').offset().left;
var r1 = $('#for_drag').width() + l1;
$('.Message').each(function(){//为APP添加事件做碰撞检测
var t2 = $(this).offset().top;
var b2 = t2 + $(this).height();
var l2 = $(this).offset().left;
var r2 = l2 + $(this).width();
var width_half = $(this).width()/2;
var height_half = $(this).height()/2;
if(r1>=l2+width_half&&r1<=r2+width_half&&b1>=t2+height_half&&b1<=b2+height_half){
console.log('相交')
$(this).css('background','#e4393c')
}else{
console.log('bu相交')
$(this).css('background','')
}
})
});
$(document).bind('mouseup',function(){
event.preventDefault();
$(document).unbind('mousemove');
$(document).unbind('mouseup')
})
});
各位大神有没有这方面的资源推荐一个,我也学习学习。。
不胜感激,,,,
HTML5已经支持了HTML5drag&drop
有一个比较好的轮子Sortable