如何绘制可拖动和可拖放之间的边线?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (53)

使用优秀的JQuery UI来进行“映射”,以便用户可以将来自一个程序的人员“映射”到其他程序的人员。

使用这个简单的JQuery:

$(document).ready(function() {
    $("div .draggable").draggable({
        revert: 'valid',
        snap: false
    });

    $("div .droppable").droppable({
        hoverClass: 'ui-state-hover',
        helper: 'clone',
        cursor: 'move',
        drop: function(event, ui) {
            $(this)
                .addClass('ui-state-highlight')
                .find("img")
                .removeAttr("src")
                .attr("src", "_assets/img/icons/check-user-48x48.png");

            $(this).droppable('disable');

            $(ui.draggable)
                .addClass('ui-state-highlight')
                .find("img")
                .removeAttr("src")
                .attr("src", "_assets/img/icons/check-user-48x48.png");

            $(ui.draggable).draggable('disable');
        }
    });

    $("div .droppable").bind("dblclick", function() {
        $(this)
            .removeClass('ui-state-highlight')
            .find("img")
            .removeAttr("src")
            .attr("src", "_assets/img/icons/user-48x48.png");
        $(this).droppable('enable');

        EnableSource($(this));
    });
});

得到这个:

如何绘制可拖动和可拖放之间的边线?

提问于
用户回答回答于

当前示例使用:

适用于FFIEChromeSafariOpera

测试:

  • Firefox 6和7 .. 22
  • IE 8和9 .. 10
  • Chrome 12+ .. 27
  • Safari 5+ .. 6
  • Opera11.51 .. 15

展示一个小图像:

用户回答回答于

扫码关注云+社区

领取腾讯云代金券