web-dev-qa-db-ja.com

jquery ui draggableを使用してホバー上のドロップ可能な領域を強調表示するにはどうすればよいですか

私は実際に2つの質問があります。タイトルの上のものが主なものです。ページに複数のdiv要素がドロップ可能としてマークされています。これらのdiv要素内には、ドラッグ可能としてマークされたスパンがあります。要素をドラッグし、ドロップ可能な領域の上にマウスを置いたときに、その領域がハイライトされるか、境界線があるため、そこにドロップできることがわかります。

副次的な質問として、すべてのドラッグ可能な要素にはdisplay：block、幅、およびフロートがあり、ドロップ可能な領域で見た目がきれいです。アイテムがドロップされると、他のアイテムのようにすてきできちんと浮かないので、アイテムに位置が設定されているように見えます。参考のために、ここに私のjavascriptがあります。

$('.drag_span').draggable({
    revert: true
});
$('.drop_div').droppable({
    drop: handle_drop_patient
});

function handle_drop_patient(event, ui) {
    $(this).append($(ui.draggable).clone());
    $(ui.draggable).remove();
}
jqueryjquery-uidrag-and-dropjquery-ui-draggablejquery-ui-droppable
30
Jhorra

http://jqueryui.com/demos/droppable/#visual-feedback をご覧ください。

例：

$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {
        $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
                .html( "Dropped!" );
    }
});
$( "#draggable2" ).draggable();
$( "#droppable2" ).droppable({
    accept: "#draggable2",
    activeClass: "ui-state-hover",
    drop: function( event, ui ) {
        $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
                .html( "Dropped!" );
    }
});
44
j08691

これは、ホバーにハイライトを追加するために機能するはずです。

$('.drop_div').droppable({
     hoverClass: "highlight",
     drop: handle_drop_patient,
});

次に、highlightのcssクラスを作成します。これにより、境界線を設定したり、背景色を変更したり、必要なものを変更したりできます。

.highlight {
    border: 1px solid yellow;
    background-color:yellow;
}

位置に関する限り、ドロップが完了したらCSSを再適用できます。

function handle_drop_patient(event, ui) {
     $(this).append( $(ui.draggable).clone().css({'float':'left','display':'block'}) );
     $(ui.draggable).remove();
}
18
J. Celestino

参考までに、 hoverClass オプションの代わりに classes が推奨されなくなりました。次のようになります。

$('.drop_div').droppable({
    classes: {
      'ui-droppable-hover': 'highlight'
    },
    drop: handle_drop_patient
});
3
Damien Roche