如何在jQuery UI中修改ui.helper

Question

所以我设置了这样的拖动：

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

，这给了我所需的图像的效果，指示有效的拖动

但是，在可辍学的上面，我想进行测试以查看可粪便的草皮是否无效，然后将该图像更改为看起来像圆的东西，并通过线条，以表明它无效。

。

我以为是这样：（只是在我总是使它看起来无效的测试中）

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

但这无能为力。实际上，如果我打印 JSON.stringify(ui.helper)，它只会输出以下内容：

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

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

那么什么给了

有其他方法可以做到吗？

Answer 1

您可以像这样检测目标：

在线结果（小提琴）

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