0

誰でも私を助けることができます

  1. 「iphone」をドラッグすると製品部門から「ショッピングカート」に移動しますが、「その他のカート」には移動したくありません。
  2. 「Lolcat シャツ」をドラッグすると、その他の div から「その他のカート」に移動しますが、「ショッピング カート」には移動したくありません。

私が言いたいのは、製品要素はショッピングカートに行きたい、その他の要素はその他のカートに行きたいということです

以下の私のコードを見てください：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Droppable - Shopping Cart Demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <style>
        h1 { padding: .2em; margin: 0; }
        #products { float: left; width: 500px; margin-right: 2em; }
        #cart { width: 200px; float: left; margin-top: 1em; }
        #cart ol { margin: 0; padding: 1em 0 1em 3em; }
    </style>
    <script>
        $(function() {

            $("#catalog").accordion();

            $("#catalog li").draggable({
                appendTo: "body",
                helper: "clone"
            });

            $("#cart ol").droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                accept: ":not(.ui-sortable-helper)",
                drop: function(event, ui) {
                    $(this).find(".placeholder").remove();
                    $("<li></li>").text(ui.draggable.text()).appendTo(this);
                }
            }).sortable({
                items: "li:not(.placeholder)",
                sort: function() {
                    // gets added unintentionally by droppable interacting with sortable
                    // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                    $(this).removeClass("ui-state-default");
                }
            });

        });
    </script>
</head>
<body>
    <div id="products">
        <h1 class="ui-widget-header">Products</h1>
        <div id="catalog">
            <h2><a href="#">Gadgets</a></h2>
            <div>
                <ul>
                    <li>iPhone</li>
                    <li>iPod</li>
                    <li>iPad</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="products">
        <h1 class="ui-widget-header">Other</h1>
        <div id="catalog">
            <h2><a href="#">T-Shirts</a></h2>
            <div>
                <ul>
                    <li>Lolcat Shirt</li>
                    <li>Cheezeburger Shirt</li>
                    <li>Buckit Shirt</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="cart">
        <h1 class="ui-widget-header">Shopping Cart</h1>
        <div class="ui-widget-content">
            <ol>
                <li class="placeholder">Add your items here</li>
            </ol>
        </div>
    </div>
    <div id="cart">
        <h1 class="ui-widget-header">Other Cart</h1>
        <div class="ui-widget-content">
            <ol>
                <li class="placeholder">Add your items here</li>
            </ol>
        </div>
    </div>
</body>
</html>
4

1 に答える 1

0

私が間違っている場合は訂正してください。ただし、他の製品のみを他のカートに追加し、他の製品を他のカートに追加したくないということだと思いますか?

その場合、カートとカタログの両方に同じ ID を持たせるのではなく、両方のカートと両方のカタログを一意に識別することができます。

...<h1 class="ui-widget-header">Other</h1>
       <div id="catalogO">...

と

...<h1 class="ui-widget-header">Products</h1>
       <div id="catalogP">...

カートIDについても同じです。

次に、カタログごとに 1 つずつ、2 つのドラッグ可能な関数を用意します。

$("#catalogP li").draggable({
    appendTo: "body",
    helper: "clone"
});

$("#catalogO li").draggable({
     appendTo: "body",
     helper: "clone"
});

次に、カートごとに 1 つずつ、2 つのドロップ可能な関数を追加します。

$("#cartP ol").droppable({
     activeClass: "ui-state-default",
     hoverClass: "ui-state-hover",
     accept: "#catalogP li",
     drop: function(event, ui) {
         $(this).find(".placeholder").remove();
         $("<li></li>").text(ui.draggable.text()).appendTo(this);
     }
 }).sortable({
     items: "li:not(.placeholder)",
     sort: function() {
         // gets added unintentionally by droppable interacting with sortable
         // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
         $(this).removeClass("ui-state-default");
     }
 });

 $("#cartO ol").droppable({
     activeClass: "ui-state-default",
     hoverClass: "ui-state-hover",
     accept: "#catalogO li",
     drop: function(event, ui) {
         $(this).find(".placeholder").remove();
         $("<li></li>").text(ui.draggable.text()).appendTo(this);
     }
 }).sortable({
     items: "li:not(.placeholder)",
     sort: function() {
         // gets added unintentionally by droppable interacting with sortable
         // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
         $(this).removeClass("ui-state-default");
     }
 });

基本的に重要なことは、ドロップ可能な関数の accept プロパティをドラッグ可能な関数の ID またはクラスに変更することです。これにより、その ID を持つコンポーネントのみがドロップ可能なコンポーネントにドロップされるようになります。

これを行うためのより効率的な方法があると確信していますが、accept プロパティを変更することは、問題を解決するための良い手っ取り早い方法です。ありがとう。

于 2013-05-31T12:45:19.717 に答える