Question

我正在使用Jquery UI并创建拖放功能。我有div元素可以拖动然后拖动后，用户可以添加图像到这个拖动的div元素。这就是我的代码设置方式

$("#dvSource img").draggable({

        //containment: '#gbox',
        cursor: 'move',
        helper: 'clone',
        scroll: false,
        connectToSortable: '#edit, #edit1, #mainContentDiv' ,
        //appendTo: '#edit',
        start: function () {},
        stop: function (event, ui) {}
    }).mousedown(function () {});



$("#edit1").draggable({
        cursor: 'move',
        helper: 'clone',
        scroll: false,
        connectToSortable: '#mainContentDiv',
        //appendTo: '#droppable',
        start: function () {$( this ).addClass( "droppedDiv" );  },
        stop: function (event, ui) {}
    }).mousedown(function () {});



$( "#mainContentDiv").droppable({ 

  accept: "#edit1",
      drop: function( event, ui ) {  
  ui.draggable.attr("id","draggeddd");
  $("#mainContentDiv").append(ui.draggable);
  //$( this ).addClass( "ui-state-highlight" );
      }
    });



$( "#draggeddd" ).droppable({

  accept: "#dvSource img",
      drop: function( event, ui ) {
   alert("fial drop");
  //$(".droppedDiv").append(ui.draggable);
  $("#draggeddd").append(ui.draggable);
      }
    });

edit1是被拖放到mainContentDiv中的DIV。这部分工作正常。但是当我尝试将#dvSource img中的图像位置添加到这个丢弃的DIV时，它并没有这样做。

请帮助我如何实现这一目标。简而言之，我的问题是，在拖放区域中拖动DIV后，如何向拖动的DIV添加更多元素。

Answer 1

问题是，由于您要在#draggeddd中将ID从#edit1更改为#draggedddin，因此您在找不到drop时会将其置于可删除状态} #mainContentDiv。这导致#draggeddd永远不会被删除。

解决方案是在更改ID后使#draggeddd可以删除，如下所示：

$( "#mainContentDiv").droppable({ 
   accept: "#edit1",
   drop: function( event, ui ) {  
      ui.draggable.attr("id","draggeddd");
      $("#mainContentDiv").append(ui.draggable);
      //$( this ).addClass( "ui-state-highlight" );

      $( "#draggeddd" ).droppable({
          accept: "#dvSource img",
          drop: function( event, ui ) {
              alert("fial drop");
              //$(".droppedDiv").append(ui.draggable);
              $("#draggeddd").append(ui.draggable);
          }
      });
  }
});

如何使拖动的元素再次可以删除

1 个答案: