javascript - 拖放时的虚线边框

Question

我试图让用户拖放项目。当一个项目从它的位置抬起时，一个灰色的虚线框需要出现。当物品移动到另一个点附近时，盒子会移动以打开一个目标（灰色虚线框）来放置物品。（见图）

这是我当前的 jQuery。

$(function() {
    $( "#sortable" ).sortable({
      revert: true
    });

    $( "#draggable" ).draggable({
       connectToSortable: "#sortable",
       revert: "invalid",
       cursor: "move"
    });
    $( "ul, li" ).disableSelection();
});

// when the DOM is ready:
$(document).ready(function () {
    // find the div.fade elements and hook the hover event
    $('div.fade').hover(function() {
        // on hovering over, find the element we want to fade *up*
        var fade = $('> div', this);


        // if the element is currently being animated (to a fadeOut)...
        if (fade.is(':animated')) {
              // ...take it's current opacity back up to 1
              fade.stop().fadeTo(250, 1);
        } else {
              // fade in quickly
              fade.fadeIn(250);
        }
    }, function () {
        // on hovering out, fade the element out
        var fade = $('> div', this);
        if (fade.is(':animated')) {
              fade.stop().fadeTo(3000, 0);
        } else {
              // fade away slowly
              fade.fadeOut(500);
        }

    });

});

Answer 1

您可以尝试以下...

CSS：

.dashed-placeholder {
    border: 2px dashed #999;
    width: 217px;
    height: 320px;
    background: #ccc;
    margin: 10px 0px 50px 0px;
    padding: 8px 0px 10px 6px;
}

JS：

$("#sortable").sortable({
    revert: true,
    placeholder: "dashed-placeholder"  
});

这是演示小提琴