javascript - 如何将元素从一个div复制到另一个div？

Question

如何在单击一个元素后复制元素 <div>在Master中，所以它会立即出现在Creation中？

“大师”div 看起来像这样:

  <div id="master" class="master">

        <p id="feedback">
            <span>You've selected:</span> <span id="select-result">none</span>.
        </p>


        <div class="frame" style="align-content: center">
            <div class="portlet portlet-count firstTab" id="1">
                <div class="portlet-header">First</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet</div>

            </div>
            <div class="portlet portlet-count firstTab" id="2">
                <div class="portlet-header">Second</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet</div>

            </div>

            <div class="portlet portlet-count firstTab" id="3">
                <div class="portlet-header">Third</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet</div>

            </div>

        </div>
    </div>

“创建”div 如下所示:

   <div id="creation">
        <p id="newFeedback">
            <span>You've selected:</span> <span id="select-result-2">none</span>.
        </p>

        <div class="newFrame" style="align-content: center">
            <div class="portlet portlet-count secondTab" id="11">

            </div>
        </div>

jQuery

 $(function () {
    $(".frame").selectable({
        stop: function () {
            var result = $("#select-result").empty();
            var newResult = $("#select-result-2").empty();
            var add = $("#newExam").empty();
            var count = 0;
            var $this = $(this);

            $(".ui-selected", this).each(function () {

                if (this.id > 0) {
                    result.append(this.id + " ");
                    newResult.append(this.id + " ");
                    count = count + 1;

                    if ($this.hasClass("firstTab")) {
                        $this.addClass("secondTab").prependTo("#creation");
                    } else {
                        $this.addClass("firstTab").prependTo("#master");
                    }
                }
            });
            add.append(count);
        }
 });
});

Answer 1

您可以只使用一个简单的点击处理程序，例如

$('.frame .portlet').click(function() {
  var $this = $(this),
    $error;
  if ($this.hasClass('added')) {
    $error = $this.next('.clone-error');
    if (!$error.length) {
      $error = $('<span />', {
        'class': 'clone-error',
        text: 'Alread added'
      }).insertAfter(this);
    }
    $error.stop().show().delay(500).hide(1);
  } else {
    $this.addClass('added').clone().appendTo('#creation .newFrame');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="master" class="master">

  <p id="feedback">
    <span>You've selected:</span>  <span id="select-result">none</span>.
  </p>


  <div class="frame" style="align-content: center">
    <div class="portlet portlet-count firstTab" data-id="1">
      <div class="portlet-header">First</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet</div>
    </div>

    <div class="portlet portlet-count firstTab" data-id="2">
      <div class="portlet-header">Second</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet</div>
    </div>

    <div class="portlet portlet-count firstTab" data-id="3">
      <div class="portlet-header">Third</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet</div>
    </div>

  </div>
</div>


<div id="creation">
  <p id="newFeedback">
    <span>You've selected:</span>  <span id="select-result-2">none</span>.
  </p>

  <div class="newFrame" style="align-content: center">
    <div class="portlet portlet-count secondTab" data-id="11">

    </div>
  </div>
</div>