代码之家 › 专栏 › 技术社区 › lepe

更改拖动对象并在删除后将其还原

droppable draggable jquery-ui jquery javascript

lepe · 技术社区 · 15 年前

请帮帮我,我一般都知道如何使用Draggable和Droppable类,但我找不到实现这一点的方法:

我有一个大尺寸的图像,需要拖放到一个分区中。

1)拖动时,我希望使用一个小尺寸的图像(我已经有了它,只需要更改SRC),而不是移动大尺寸的图像。

2)一旦到达目标分区,我想隐藏拖动的图像,并在其原始位置再次显示大尺寸图像。

唯一的限制是:“revert:invalid”必须应用。

这是我的代码:

$("#big_img").draggable({ 
    revert: 'invalid', 
    drag : function(e, ui){
        //Change big image with a small version of it
        $(this).attr("src").replace("/Large/","/Small/"); //<--this do nothing
    }
});
$("#target").droppable({
    drop: function(e, ui) {
        alert("was added"); //<-- no problem here.
        //Restore the big_img
    }
});

谢谢您。

2 回复 | 直到 15 年前

lepe 15 年前

我想我解决了:

使用“助手”,我可以实现使用其他图像,如:

$("#big_img").draggable({ 
    helper: return $("<img src='"+$(this).attr("src").replace("/Large/","/Small/")+"' />");
});

我只需要把它放在鼠标光标的中心,但我认为这不会有问题。然后, 移除掉的元素也不会有问题。所以,我不需要恢复图像,因为它并不真正移动。:)

如果你还有别的选择,我会很高兴读到的。

Justin Johnson 15 年前

String.prototype.replace() 不修改源字符串,但返回新的已修改字符串。尝试以下操作:

$("#big_img").draggable({ 
    revert: 'invalid', 
    drag : function(e, ui) {
        $this = $(this);
        $this.attr("src", $this.attr("src").replace("/Large/","/Small/"));
    }
});

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前