-1

私がやろうとしているのは、liスパンをクリックしてli要素をあるコンテナから別のコンテナに移動することです。ユーザーが最初のコンテナから li span (id="add") をクリックすると、li が削除され、2 番目のコンテナに表示されるはずです。次の構造を思いついたのですが、選択したliだけを移動するのに問題があり、この場合のコールバックの処理方法がよくわからないため、おそらく最善の回避策ではありません。アドバイスをいただければ幸いです

 <script>
(function($){   
jQuery( "#catalog" ).accordion({
heightStyle: "content"
});

jQuery("span#add").click(function(){
    jQuery(this).parent().animate(
            {
                'margin-left':'1000px'
            },1000,
            function(){
                var ul_class = $(this).parent().attr('class');
                $(this).slideUp('fast');               
                $("ul."+ ul_class + "_clone").append($(this).parent().html());
                $(this).remove();                
            }
            );

});

}) (jQuery);
</script>

<?php $datas = json_decode($param[0]->params) ?>
<div class="config_holder">
<div id="products">
    <h3>Config Params</h3>
    <div id="catalog">
        <?php foreach ($datas as $key1=>$data):?>
            <h4><a href="#"><?php if(!empty($key1)) echo $key1 ?></a></h4>
        <div>
            <ul class="<?php echo $key1 ?>">
                <?php if(!empty($data) ):?>
                <?php foreach($data as $key2=>$item):?>
                <?php if($key2 !="&nbsp;" || $key2 != " "): ?>
                <li id="" class="ui-state-default ui-corner-all" ><?php  echo $key2; ?><span style="float:right" id="add" class="ui-icon ui-icon-circle-plus"></span></li>
                <?php endif;?>
                <?php endforeach; ?>                
                <?php endif;?>
            </ul>
        </div>
        <?php endforeach;?>
    </div>
</div>
<div id="cart">
<h3 >Mein Konfiguration</h3>
<div class="ui-widget-content">
<img title="" src="http://i.dell.com/das/dih.ashx/165x130/sites/imagecontent/consumer/merchandizing/de/PublishingImages/165x119/6315-inspiron-17r-5721-165X119-de.png" alt="">
<ol>
<li class="placeholder">My Choises</li>
<?php foreach ($datas as $key3=>$clone):?>
<ul class="<?php echo $key3 ?>_clone"></ul>
<?php endforeach;?>

</ol>

</div>
<a href=""><button>search</button></a>
</div>
</div>
4

2 に答える 2

0

jquery ui を使用できる場合は、その接続リスト機能を使用できます。

$(function() {
    $( "#IdOfFirstList, #IdOfSecondList" ).sortable({
      connectWith: ".commonClassName"
    }).disableSelection();
});

Heres は完全な例へのリンクですhttp://jqueryui.com/sortable/#connect-lists

于 2013-03-11T14:37:41.477 に答える
0

これを試して...

$("span, #add, .ui-icon").on('click', function(){
    $(this).parent().animate({'margin-left':'1000px'}, 1000, function(){
        var ul_class = $(this).parent().attr('id');
        $(this).slideUp('fast');               
        $("ul#"+ ul_class + "_clone").append($(this).parent().html());
        $(this).remove();
    });
});

そして、このデモを見てください

于 2013-03-11T14:59:25.820 に答える