可拖动需要在恢复时扩展

时间:2016-01-21 15:09:37

标签: javascript jquery jquery-ui

我有一个对象在mousedown上改变它的大小,并希望它返回到完整大小,如果不正确。我无法弄清楚如何在它被拖动之后改变它的大小。

我已经尝试在revert,mouseup中添加命令,另一个被调用的函数......我很难过。我在所有这些领域添加了警报,但它们都有效。它只是忽略height()和width()。

function dragAndDrop(draggedItem,dropZone,scaleHeight,scaleWidth)
{
var bool = 0;
var draggedItem = $(draggedItem);
var dragFromLeft = draggedItem.offset().left;
var dragFromTop = draggedItem.offset().top;
var dropZone = $(dropZone);
var currentMousePos = { x: 0, y: 0};

draggedItem.draggable //Make item draggable
({
    opacity:1, 
    revert:function()//'invalid'
    {
        $(".strobeRed").fadeTo(100, .50).fadeTo(100, 0);
        $(this).offset({top: dragFromTop, left: dragFromLeft}).height(500);
    }
})

draggedItem.mousedown(function(event){
    currentMousePos.x = event.pageX - (scaleWidth/2);  
    currentMousePos.y = event.pageY - (scaleHeight/2);
    $(this).height(scaleHeight);
    $(this).width(scaleWidth);
    $(this).offset({top: currentMousePos.y, left: currentMousePos.x});
});

dropZone.droppable //Make item droppable
({
    accept:draggedItem,
    drop: function(event, ui)
    {
        //$( ui.draggable ).fadeOut(),
        $( this ).droppable( "option", "disabled", true ).css("background-color", "green"), //$(this) = $(event.target)
        $( this ).draggable( "option", "disabled", true )

    },
    tolerance: "touch"
});
}

2 个答案:

答案 0 :(得分:0)

退房:http://api.jqueryui.com/draggable/#option-revert

您在恢复功能上缺少true所需的返回值。根据文件:

Function: A function to determine whether the element should revert to its start position. The function must return true to revert the element.

编辑:澄清

revert:function() {
    $(".strobeRed").fadeTo(100, .50).fadeTo(100, 0);
    $(this).offset({top: dragFromTop, left: dragFromLeft}).height(500);
    return true;
}

答案 1 :(得分:0)

原来是一个jquery版本不匹配。我们使用边缘1x卡住了jquery 1.7.1。通过升级到2.2.0,问题得以解决。感谢@ ryan0319和我一起解决这个问题。