如何使用jquery ui draggable在悬停上突出显示可放置区域 [英] How do I highlight a droppable area on hover using jquery ui draggable

问题描述

我实际上有两个问题，标题是主题。我在页面上有多个div元素标记为可删除。在这些div元素内，我有跨标记被标记为可拖动。我想要这样，当你拖动一个元素，它被悬停在一个可放置的区域，该区域突出显示或有一个边框，所以他们知道他们可以把它放在那里。

作为次要问题，我所有的可拖动元素都有一个显示：块，宽度和浮点数，所以它们在我的可放置区域看起来很漂亮。当物品被丢弃时，他们似乎得到一个位置给他们，因为他们不再浮动漂亮和整洁像我的其余的项目。作为参考，这里是我的javascript。

  $（'。drag_span'）。draggable（{
 revert：true 
}）; 
 $（'。drop_div'）。droppable（{
 drop：handle_drop_patient 
}）; 
 
函数handle_drop_patient（event，ui）{
 $（this）.append（$（ui.draggable）.clone（））; 
 $（ui.draggable）.remove（）; 
} 
  

解决方案

查看http://jqueryui.com/demos/droppable/#visual-feedback 。

Ex：

  $（#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， 
 $（this）
 .addClass（ui-state-highlight）
 .find（p）
 .html（Dropped！）; 
} 
}）; 
  

I actually have two questions, the on in the title being the main one. I have multiple div elements on the page marked as droppable. Inside these div elements I have spans that are marked as draggable. I want it so when you are dragging an element and it is hovered over a droppable area that area either highlights or has a border so they know they can drop it there.

As secondary question, all my draggable elements have a display:block, a width and a float on them, so they look nice and neat in my droppable areas. When items are dropped they seem to get a position set to them as they no longer float nice and neat like the rest of my items. For reference, here is my 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();
}

解决方案

Check out http://jqueryui.com/demos/droppable/#visual-feedback.

Ex:

$( "#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!" );
    }
});

这篇关于如何使用jquery ui draggable在悬停上突出显示可放置区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！