Question

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

sequence_number

这为我提供了指示有效拖动的图像所需的效果

但是在droppable结束时，我想做一个测试，看看droppable tagrte是否无效，然后将该图像更改为看起来像一个圆圈的东西，并指示它是无效的。

我认为它会是这样的:(只是做一个我总是让它看起来无效的测试）

$(".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)

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

那是什么给了什么？

我还有其他办法吗？

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

}

如何在jquery ui droppable中修改ui.helper？

1 个答案: