10090
こんばんわ  
ショッピングカートのシステムについてお聞きしたいです。  
参考URL  
<http://www.webresourcesdepot.com/wp-content/uploads/file/drag-drop-shopping-
cart/>  
このサイトではカートに入れるとタイトルが表示されていますがこれを画像に置き換えるにはどうすればいいでしょうか

```

    basket.find("ul").appendの'<span class="name">' + move.find("h3").html()
    
```

ここのあたりをいじるのかなとは思うのですが。。よろしくお願いします。

```

    <section id="header" style="margin-bottom: 50px;"><h3>Back to the WebResourcesDepot article: <a href="http://www.webresourcesdepot.com/drag-n-drop-shopping-cart-with-jquery-ui-tutorial/">Drag ‘n’ Drop Shopping Cart With jQuery UI (Tutorial)</a><h3></section>
    
    <section id="product">
        <ul class="clear">
            <li data-id="1">
                <a href="#">
                    <img src="" alt="">
                    <h3>iPad 32gb retina screen</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
            <li data-id="2">
                <a href="#">
                    <img src="" alt="">
                    <h3>Turntable mixer</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
            <li data-id="3">
                <a href="#">
                    <img src="" alt="">
                    <h3>IBM 15" super-fast computer</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
            <li data-id="4">
                <a href="#">
                    <img src="" alt="">
                    <h3>Some crazy circuit</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
            <li data-id="5">
                <a href="#">
                    <img src="" alt="">
                    <h3>White earpieces</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
            <li data-id="6">
                <a href="#">
                    <img src="" alt="">
                    <h3>Headphones with free keyboard</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
            <li data-id="7">
                <a href="#">
                    <img src="" alt="">
                    <h3>iPhone 4S</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
            <li data-id="8">
                <a href="#">
                    <img src="" alt="">
                    <h3>Another crazy circuit or..</h3>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </a>
            </li>
        </ul>
    
```

```

       <aside id="sidebar">
        <div class="basket">
            <div class="basket_list">
                <div class="head">
                    <span class="name">Product name</span>
                    <span class="count">Quantity</span>
                </div>
                <ul>
                    <!--li>
                        <span class="name">Samsung S3 asd asdasdaf dfsdghgfg dgfg</span>
                        <input class="count" value="1" type="text">
                        <button class="delete">&#10005;</button>
                    </li-->
                </ul>
            </div>
        </div>
    
    </aside>
    
```

```

    $(function () {
    
        // jQuery UI Draggable
        $("#product li").draggable({
    
            // brings the item back to its place when dragging is over
            revert:true,
    
            // once the dragging starts, we decrease the opactiy of other items
            // Appending a class as we do that with CSS
            drag:function () {
                $(this).addClass("active");
                $(this).closest("#product").addClass("active");
            },
    
            // removing the CSS classes once dragging is over.
            stop:function () {
                $(this).removeClass("active").closest("#product").removeClass("active");
            }
        });
    
        // jQuery Ui Droppable
        $(".basket").droppable({
    
            // The class that will be appended to the to-be-dropped-element (basket)
            activeClass:"active",
    
            // The class that will be appended once we are hovering the to-be-dropped-element (basket)
            hoverClass:"hover",
    
            // The acceptance of the item once it touches the to-be-dropped-element basket
            // For different values http://api.jqueryui.com/droppable/#option-tolerance
            tolerance:"touch",
            drop:function (event, ui) {
    
                var basket = $(this),
                        move = ui.draggable,
                        itemId = basket.find("ul li[data-id='" + move.attr("data-id") + "']");
    
                // To increase the value by +1 if the same item is already in the basket
                if (itemId.html() != null) {
                    itemId.find("input").val(parseInt(itemId.find("input").val()) + 1);
                }
                else {
                    // Add the dragged item to the basket
                    addBasket(basket, move);
    
                    // Updating the quantity by +1" rather than adding it to the basket
                    move.find("input").val(parseInt(move.find("input").val()) + 1);
                }
            }
        });
    
        // This function runs onc ean item is added to the basket
        function addBasket(basket, move) {
            basket.find("ul").append('<li data-id="' + move.attr("data-id") + '">'
                    + '<span class="name">' + move.find("h3").html() + '</span>'
                    + '<input class="count" value="1" type="text">'
                    + '<button class="delete">&#10005;</button>');
        }
    
    
        // The function that is triggered once delete button is pressed
        $(".basket ul li button.delete").live("click", function () {
            $(this).closest("li").remove();
        });
    
    });
    
```
CC BY-SA 3.0
2015-05-12T13:44:16.057
10083
2015-05-13T02:11:56.720
2015-05-13T00:19:14.167
440
9701
question
jquery jquery-ui
ショッピングカートでのドラッグアンドドロップ操作
画像サイズとか表示枠とかいろいろ調整が必要ですが、  
とりあえず画像を表示させるだけならこれでいけます。

変更前

```

    function addBasket(basket, move) {
        basket.find("ul").append('<li data-id="' + move.attr("data-id") + '">'
                + '<span class="name">' + move.find("h3").html() + '</span>'
                + '<input class="count" value="1" type="text">'
                + '<button class="delete">&#10005;</button>');
    }
    
```

変更後

```

    function addBasket(basket, move) {
        var dataId = move.attr("data-id");
        basket.find("ul").append('<li data-id="' + dataId + '">');
        // この辺はもっとうまいやり方があると思います。
        var obj = basket.find("ul li[data-id='" + dataId + "']");
        obj.append(move.find("img").clone());
        obj.append('<input class="count" value="1" type="text">');
        obj.append('<button class="delete">&#10005;</button>');
    }
    
```
CC BY-SA 3.0
2015-05-12T17:29:25.180
10090
2015-05-13T02:11:56.720
2015-05-13T02:11:56.720
3516
3516
10083
answer