jQuery 点击时上下滑动

Question

我有一个可以向上和向下滑出面板的工具，它使用 .mousedown、.mouseup 和 draggable 并且我我遇到了一些问题。

1. 可拖动对象不会在其容器中向上移动，但指针会记录下落(可能与所有内容滑出时它所做的移动有关。

2. 滑出面板应位于周围内容上方。position:absolute有效，但尾随单词会折叠以填充其应占据的空间。我希望它保持内联。

[edit] 和 hoverClass 也不会激活。

http://jsfiddle.net/monsto/tDt2M/ (轮廓字为菜单字)

和代码...

$(function() {
$('#word').mousedown(function(ev, ui) {
    $("#save").slideDown(100);
    $("#del").slideDown(100);
});    
$('#word').mouseup(function(ev, ui) {
    $("#save").slideUp(100);
    $("#del").slideUp(100);
});    
$('#word').draggable({
    containment: 'parent'
    ,revert: true, revertDuration: 100
});
$('#del').droppable({
    tolerance: 'pointer'
    ,hoverClass: 'over'
    ,drop: function() {
        var vote = alert("Delete action goes here");
    }
});
$('#save').droppable({
    tolerance: 'pointer'
    ,hoverClass: 'over'
    ,drop: function() {
        var vote = alert("SAVE");
    }
});
});​

Answer 1

对于悬停 css 类，动态地将 css 设置为 droppable 函数的一部分，而不是使用 css 类...

$('.del').droppable({
    tolerance: 'pointer'
    ,hoverClass: 'over'
    ,over: function() {
        $(this).css('background-color', '#fff');
    }
    ,drop: function() {
        var vote = alert("Delete action goes here");
    }
});

对于这些事件，我得到了很好的结果。区别在于您必须先单击该单词才能看到选项(或者您可以将其移动到鼠标上方)。这样，当您开始拖动时，div 已经展开...

$(function() {
    $('#word').draggable({
        revert: true, revertDuration: 100
    });
    $('#del').droppable({
        tolerance: 'pointer'
        ,over: function() {
            $(this).css('background-color', '#f88');
        }
        ,drop: function() {
            var vote = alert("Delete action goes here");
        }
    });
    $('#save').droppable({
        tolerance: 'pointer'
        ,over: function() {
            $(this).css('background-color', '#8f8');
        }
        ,drop: function() {
            var vote = alert("SAVE");
        }
    });

    $('#word').click(function(e, u){
        $("#save").slideDown(100);
        $("#del").slideDown(100);
    });

    $("#word").bind('dragstop', function(e, u){
        $("#save").slideUp(100);
        $("#del").slideUp(100);
    });
});