2

パネルを上下にスライドさせる機能があり、それを使用していますが.mousedown、いくつか問題があります。.mouseupdraggable

  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");
    }
});
});​
4

1 に答える 1

2

ホバー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);
    });
});
于 2012-04-13T21:04:14.880 に答える