如何修改 jquery ui droppable 中的 ui.helper？答案

【问题标题】：How do I modify the ui.helper in jquery ui droppable?如何修改 jquery ui droppable 中的 ui.helper？
【发布时间】：2017-08-29 18:21:58
【问题描述】：

所以我设置了一个这样的可拖动对象：

$(".draggable").draggable({
  helper: function() {
    return $("<img src='/images/valid.png'>");
  }
});

这给了我想要的表示有效拖动的图像效果

但是在 droppable 上，我想做一个测试，看看 droppable tagrte 是否无效，然后将该图像更改为看起来像一个圆圈的东西，其中有一条线通过它表示它是无效的。

我原以为会是这样：（只是做一个测试，我总是让它看起来无效）

$(".droppable").droppable({
  over : function(event, ui) {
    ui.helper.html("<img src='/images/invalid.png'>");
  }
});

但这并没有做任何事情。事实上，如果我打印 JSON.stringify(ui.helper) 它只会输出这个：

{"0":{},"selector":"","length":1}

这看起来不像我返回的 img 对象。

那是什么？

还有其他方法可以做到这一点吗？

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

你可以像这样检测目标：

在线结果（Fiddle）

html

<div class="dragMe">Drag me</div>
<div id="content">
  <div id="divInvalid">
   drop here
  </div>
</div>

JavaScript

$(init);

function init() {
    $('.dragMe').draggable({
        containment: '#content',
        cursor: 'move',
        helper: newDiv,
        revert: "invalid",
    });

    $('#divInvalid').droppable({
        over: function (event, ui) {
            $(event.target).addClass('validClass');
        },
        out: function (event, ui) {
            $(event.target).removeClass('validClass');
        }
    });

    function newDiv() {
        $row = $(document.createElement('div'));
        $row.attr("id", "droppableDiv");
        $row.html("dragged");
        return $row;
    }

}

【讨论】：