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

这是Demo Fiddle

拖动和下降的虚线边框

1 个答案: