jquery ui droppableのui.helperを変更するにはどうすればよいですか？このような

Question

だから私のセットアップドラッグ：

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

私がドロップ可能かどうかを確認するテストをやってみたい、上私に有効なドラッグ

を示す画像の所望の効果を与えるが、ドロップ可能な上、どのtagrteが無効な場合は、その画像を無効にするために、その画像を丸で囲んだ線に変更します。

私はそれがこのようなことだろうと思った。（私はいつもそれが無効に見えるようにテストをしている）

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

しかし、これは何もしません。私はJSON.stringify(ui.helper)を印刷する場合、実際にはそれだけで、これを出力します。私は返さIMGオブジェクトのようなものを見ていない

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

。

だから何ですか？

これを行うには別の方法がありますか？

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

}