Question

我做了一个拖累＆amp;在JQuery UI中使用contenteditable删除元素，但我需要多个拖动和放大落入可放置的面板。有什么解决方案可以解决吗？

以下是代码：

read/write

在https://jsfiddle.net/Issact/5fge8Lzc/

中查看

Answer 1

您可以使用该元素的id更改基于拖动元素的html内容，如下所示：

$( "#tempEditorView" ).droppable({
        accept: '.temp',
      drop: function( event, ui ) {
      var html = "";
      if(ui.draggable.attr("id")=="textTemp"){
      html = '<div id="test" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here.</p><div style="padding:20px;" class="tempDraggableArea"></div></div>';
      }else if(ui.draggable.attr("id")=="textTemp1"){
      html = '<div id="test" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here1.</p><div style="padding:20px;" class="tempDraggableArea"></div></div>';
      }else if(ui.draggable.attr("id")=="textTemp2"){
      html = '<div id="test" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here2.</p><div style="padding:20px;" class="tempDraggableArea"></div></div>';
      }
  $(html).appendTo(this).hide().slideDown();
      }
    });

<强> DEMO

需要多个Drag＆amp;将元素放入可放置的面板中。有人可以帮帮我吗？

1 个答案: