使用jquery ui将div从侧边栏拖动到表格

Question

我是js和jquery的初学者，如果有人可以帮助我，我需要一些帮助......

我想做什么？

我想将div从侧边栏拖到表格。在侧边栏div必须只能拖动到表格。当我将div拖到table中时，在table中，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!" );
      }
    });
  });

DEMO和SOURCE代码：http://jsbin.com/erofot/17/edit | http://jsbin.com/erofot/17

Answer 1

以下是如何执行此操作:(使用此代码替换jsbin中的内容） jsbin

$(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());
      }
    });
  });