如何將元素從一個div復制到另一個div？

Question

在Master中單擊一個<div>后如何復制元素，以便該元素立即出現在Creation中？

'Master'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>

'Creation'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> 

Answer 2

請參閱下面的示例

 function copyMe(element) { element = $(element).clone(); //copy //element = $(element); //if move element.appendTo($('#creation')); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div onclick="copyMe(this);"> Div 1 </div> <div onclick="copyMe(this);"> Div 2 </div> <div onclick="copyMe(this);"> Div 3 </div> <div id="creation"> </div>