当前位置：首页 → 问答吧 → Jquery 中 Drag & Drop事件再绑定~

Jquery 中 Drag & Drop事件再绑定~

时间：2009-05-05

来源：互联网

当通过AJAX返回的新DOM元素后，新的元素并不支持已设置Drag&Drop的功能，
而我再次调用Drag&Drop的方法重新注册也不行~

有什么好办法呢？

这是我的代码

复制代码

$('div#adminPage').pagination(<?=$adminImagesCount?>,{
perPage:24,
callback:function(page){
var start=(page-1)*24;
var end=page*24;
$.post("publish_images_query.php",
{ flag:0, rowStart:start, rowEnd:end },
function(msg){
$('ul#adminDrag li').remove();
$('ul#adminDrag').append(msg);
});
$("div#adminPage span.pageNumber").html("检索到"+page+"记录");
adminDragAndDrop();
}
});
// 支持拖放
var $gallery=$('#customerDrag'), $trash = $('#customerGabage');
// 图片展示区拖动
$('li',$gallery).draggable({
helper: 'clone',
containment:'document',
cursor:'move',
cursorAt: { left: 20 , top:20 },
opacity: 0.5,
revert: 'invalid'
});
// 垃圾回收区
$trash.droppable({
accept: '#customerDrag > li',
drop: function(ev, ui) {
deleteImage(ui.draggable);
}
});
// 允许撤销
$gallery.parent().droppable({
accept: '#customerDrop > li',
drop: function(ev, ui) {
recycleImage(ui.draggable);
}
});
// 删除展示容器中的物件
function deleteImage($item){
$item.fadeOut('slow',function(){
// 检测gabage里是否有ul
var $list = $('ul',$trash).length ? $('ul',$trash) :$('<ul id="customerDrop"/>').appendTo($trash);
$item.appendTo($list)
.fadeIn(function(){
$item.find('img')
.animate({width: '40px' , height: '20px' ,opacity:'0.5'})
.animate({width: '50px' , height: '30px' ,opacity : '1.0'},'slow','easeOutBounce')
});
});
$("ul#customerDrop>li").css({display : "inline"});
}// end of deleteImage
// 回收垃圾容器中的物件
function recycleImage($item) {
$item.fadeOut('slow',function(){
$item.find('img')
.animate({width : '80px', height : '60px',opacity : '1.0'},'easeOutBack')
.end()
.appendTo($gallery)
.fadeIn();
});
}// end of recycleImage

作者: chenyu220286 发布时间: 2009-05-05

要么把你的Drag & Drop事件放到ajax里面
要么用live绑定事件

作者: ggcall 发布时间: 2009-05-06

Live也可以绑定Drag Drop？
好像是mousemove、mousedown之类的吧！

我放到Ajax后重新绑定，但是也没效果

作者: chenyu220286 发布时间: 2009-05-06

你在ajax中的返回成功的回调函数中,重新把你的drag&drop事件,重新写一下,就OK 了

作者: seekarmor 发布时间: 2009-05-06

# $.post("publish_images_query.php",
#                     { flag:0, rowStart:start, rowEnd:end },
#                     function(msg){
#                         $('ul#adminDrag li').remove();
#                         $('ul#adminDrag').append(msg);

放到这里

#                    });

作者: ggcall 发布时间: 2009-05-06

Jquery 中 Drag & Drop事件再绑定~

热门阅读

热门下载