jquery - jQuery在点击时上下滑动

Question

我有一个可以上下滑动面板的设施，它使用.mousedown，.mouseup并且draggable我遇到了一些问题。

1. 可拖动的不会在它的容器中向上移动，但指针会记录下降（可能与它在所有东西滑出时所做的移动有关。

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

[编辑]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 动态设置为可放置函数的一部分，而不是使用 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);
    });
});