在HTML5和Chrome

Question

我见过许多与此相关的问题，包括this link，但是，我仍然无法实现我想要的功能。我已经提出了最简单的小提琴，这也基本上总结了我操纵风格等方面的知识。

以下小提琴的AFAIK仅适用于谷歌浏览器。

$('.droppable').droppable({
    accept: '#q1',
    over: function(e,ui) {
       $(ui.draggable).css({ cursor: 'copy' });
    },
    out:function(e,ui) {
       $(ui.draggable).css({ cursor: 'no-drop' });
    },
    activate: function(e,ui) {
       $(this).animate({ fill:rgb(255,0,0) }).text('Drop me here!');
    },
    deactivate: function(e,ui) {
       $(this).animate({ borderColor: 'gray' }).text('');
    }
});

here is the fiddle

我希望有一个包含禁用输入框的可拖动，我希望能够将上述输入框拖动到SVG矩形中。理想情况下，在掉落后，盒子应该略微收缩，或者甚至更好，用数字代替。

关键问题：

1. 这个框是HTML，很难改变，因为它是在jQuery中生成的，而我的问题则存在于div中。

2. 矩形也需要是SVG。