Jquery ui 使用jquery ui将div从侧栏拖到表中

我开始学习js和jquery，如果有人能帮我，我需要一些帮助

我想做什么

我想将div从侧边栏拖到表中。在侧边栏中，div必须只能拖动到表中。当我将div拖动到表中时，表中的div必须可以调整大小并再次拖动

照片:

我尝试使用此代码，但效果不好：

$(function() {
    $( ".draggable" ).resizable();
    $( ".draggable" ).draggable({revert: 'invalid', helper:'clone', snap: "#drop_here td", opacity: 0.7});
    $( "#drop_here td" ).droppable({
      accept: '.draggable',
      drop: function( event, ui ) {
        $( this )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });

---

演示和源代码：|

下面是您如何做到这一点的：（用此代码替换jsbin中的内容）

---

我错过什么了吗？这不正是您的代码正在做的吗？或者我弄错了什么？是的，但我不能克隆元素，我拖动原始元素：）我不知道为什么，但当我将此代码复制到我的原始代码时（当将此实现到我的应用程序时），div.draggable不会附加到我拖动他的位置，Div附加在我的位置+50,70100px右侧等等，或者类似的东西，并且请告诉我如何只能将可关闭的Div拖动到表中？是的，非常感谢，我将在我的原始代码中看到为什么当我将Div拖动到表中时他会得到位置（原始位置+100px右侧）。他不想呆在我放他的地方。但是非常感谢mch提供的代码

$(function() {
    //$( ".draggable" ).resizable();
    $( ".draggable" ).draggable({
      revert: 'invalid', 
      helper:"clone",
      snap: "#drop_here td", 
      opacity: 0.7
    });
    $( "#drop_here td" ).droppable({
      // accept only from left div, 
      // this is necessary  to prevent clones duplicating inside droppable
      accept: '#left .draggable',
      drop: function( event, ui ) {
        // 4 append clone to droppable
        $( this ).append(
          // 1 clone draggable helper
          $(ui.helper).clone()
          // 2 make the clone draggable
          .draggable({containment:"parent"})
          // 3 make the clone resizable
          .resizable());
      }
    });
  });