如何將元素移動到另一個元素，然後自動完成一些div

例如，我想移動Boston到右側，這將USA_LL - United States - Low Pay下。我的代碼如下：

function move(elem){ 
    if($(elem).parent().attr("id")=="left-part"){ 
     $(elem).appendTo('#right-part'); 
    } 
    else{ 
     $(elem).appendTo('#left-part'); 
    } 
}

的HTML代碼如下：

<div class="panel-body" id="left-part"> 
    <div class="item" onclick="move(this)"> 
    <div class="row"> 
     <div class="col-md-2 item_position"><p class="item-words">Boston(BOS)</p></div> 
     <div class="col-md-2 arroww"><img class="img-responsive arrow_1" src="file:///Users/cengcengruihong/Desktop/bootstrap%20exercise/static/images/[email protected]" alt="arrow" width="18px"></div> 
    </div> 
    </div> 
</div> 
<div class="panel-body" id="right-part"> 
    <div class="item2" id="removed"> 
    <div class="row"> 
     <div class="col-md-2 item_position2"><p class="item-words">CAN-Canada</p></div> 
     <div class="col-md-2 edit_position" style=""><a href="#"><img class="img-responsive edit" src="[email protected]" alt="edit"></a></div> 
     <div class="col-md-1 remove"><a href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a> 
     </div>    
    </div> 
    </div> 
</div>

但產量只是把arrow的權利了。我想要的是Boston右移沒有arrow以及edit和cancel圖標。

任何人都可以給我一個提示，將不勝感激。

來源

2017-02-28 Peter Tsung

把你的html代碼太 –

注意，你不需要'.detach（）'的'else'（出於同樣的原因它不需要在'如果'）。 – nnnnnn

@SiamakFerdos我已經把HTML代碼 –

這個結構可以幫到你。您可以使用clone()克隆元素，然後使用.appendTo()將其附加到另一個div。

$('.copy').click(function() { 
 
    $(this).parents('h1').clone().append('<span class=remove>&times;</span>').appendTo('.div-2'); 
 
    $(this).parents('h1').remove() 
 
}) 
 
$(document).on('click', '.remove', function() { 
 
    $(this).parents('h1').remove(); 
 
})

div { 
 
    border: 1px solid; 
 
    margin-bottom: 10px; 
 
    float:left; 
 
    width:48%; 
 
    min-height:200px; 
 
} 
 
.div-2{ 
 
    float:right 
 
} 
 
.div-2 .remove, 
 
.div-1 .copy{ 
 
    float:right; 
 
    cursor:pointer; 
 
} 
 
.div-2 .copy{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div-1"> 
 
    <h1>Element 1 <span class=copy>&rarr;</span></h1> 
 
    <h1>Element 2 <span class=copy>&rarr;</span></h1> 
 
    <h1>Element 3 <span class=copy>&rarr;</span></h1> 
 
    <h1>Element 4 <span class=copy>&rarr;</span></h1> 
 
</div> 
 
<div class="div-2"> 
 
    <h1>Element 5 <span class=remove>&times;</span></h1> 
 
</div>

來源

2017-02-28 06:01:33

如何將元素移動到另一個元素，然後自動完成一些div

回答

相關問題