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

Question

我是 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!" );
      }
    });
  });

演示和源代码：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());
      }
    });
  });