Question

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

draggable不会在它的容器中向上移动，但指针会记录掉落（可能与所有滑出时的移动有关。
滑出式面板应覆盖周围的内容。 position：绝对有效，但尾随单词会崩溃以填充它应该占用的空间。我希望它保持内联。

[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

对于hover 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);
    });
});

jQuery在点击时上下滑动

1 个答案: