jQueryスライドをクリックして上下に移動

Question

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

1. ドラッグは、それの容器に上向きに行くことはありませんが、ポインタは、おそらくすべてが出てきたときに、それが行う運動に関連したドロップ（登録されます。

2. スライドアウトパネルは、周囲の上でなければなりません。コンテンツの位置：絶対的な作品、それが占有すべきスペースを埋めるための末尾の単語の崩壊私はそれがインライン滞在する

[編集]をたいとhoverClassは、いずれかの活性化しない

。

動的ドロップ可能な機能の一部としてのCSSを設定する代わりにCSSを使用して、

とコード...ホバーCSSクラスの

$(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

（概説ワードは、メニュー・ワードです）クラス...

$('.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); 
    }); 
});