0

私はjqueryが初めてです。現在、私は3種類のアイテム（item1、item2、item3）と3つのバッグ（bag1、bag2、bag3）があり、bag1などの1つのショッピングカートがitem1、item2、item3、bag2を受け入れるショッピングカートのプロジェクトに取り組んでいますitem2、item3、bag3 は、これまでに開発した item3 on drop のみを受け入れます。

ここで、ユーザーが最初にバッグのいずれか (bag1 の例) を選択してから、アイテムを bag1 にドロップして、他の 2 つのバッグドロップ機能を無効にする必要があるなどの追加機能を追加したいと考えています (他のバッグはアイテムを受け入れないようにする必要がありますそのバッグで受け入れられる場合)、ユーザーが他のバッグを選択した場合も逆になります。

私はすべての可能な方法を試しました.そこにあるものはどれでも試してください.

http://jsfiddle.net/Vwu37/15/

html

<div class="bag1" ><p>bag1</p></div>
<div class="bag2" > <p>bag2</p></div>
<div class="bag3" ><p>bag3</p></div>
<div class="item1"><p>item1_1</p></div>
<div class="item1"><p>item2_1</p></div>
<div class="item1"><p>item2_1</p></div>

js 

 $('.bag1').droppable({
                accept: '.item1,.item2,.item3',
                 onDragEnter:function(e,source){
                    $(source).draggable('options').cursor='auto';
                },
                onDragLeave:function(e,source){
                    $(source).draggable('options').cursor='not-allowed';
                },
                onDrop:function(e,source){
                    var name = $(source).find('p:eq(0)').html();
                    var price = $(source).find('p:eq(1)').html();
                    addProduct(name, parseFloat(price.split('$')[1]));
                }
            });

            $('.bag2').droppable({
                accept: '.item2,.item3',
                onDragEnter:function(e,source){
                    $(source).draggable('options').cursor='auto';
                },
                onDragLeave:function(e,source){
                    $(source).draggable('options').cursor='not-allowed';
                },
                onDrop:function(e,source){
                    var name = $(source).find('p:eq(0)').html();
                    var price = $(source).find('p:eq(1)').html();
                   }
            });

            $('.bag3').droppable({
                accept: '.item3',
                onDragEnter:function(e,source){
                    $(source).draggable('options').cursor='auto';
                },
                onDragLeave:function(e,source){
                    $(source).draggable('options').cursor='not-allowed';
                },
                onDrop:function(e,source){
                    var name = $(source).find('p:eq(0)').html();
                    var price = $(source).find('p:eq(1)').html();
                                    }
            });
4

1 に答える 1

2

あなたの立場で私がすることは、3 つの異なるクラス ( bag1、bag2、bag3) を持つ代わりに、 という新しいクラスを作成し、それぞれのバッグにそのクラスを与え、それぞれに固有の他の CSS を という別のbagクラスで指定することです。. たとえば、最初のバッグは になります。次に、このようなjQuery関数を追加しますonetwothree<div class="bag two" style="...

$('.bag').click(function() {
    if($('.selected').length > 0 && !$(this).hasClass('selected'))
    { // Checks to see if there is a selected and if the clicked one is selected
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
    }
    else if($(this).hasClass('selected')) {
        // Allows a bag to be toggled when clicked
        $(this).removeClass('selected');
    }
    else {
        // If there is no bag `selected` then make the clicked one selected
        $(this).addClass('selected');
    }
});

selectedまた、ユーザーがクリックされたものを知るためのクラスの CSS を作成します。

.selected {
    background-color: #FFFF00;
}

次に、何かに基づいてドラッグ可能かどうかのルールを設定できますselected。この部分は疑似コードです

 if($('.bag.one').hasClass('selected'))
 {
     // Allow things to be dragged to only bag one
 }
 if($('.bag.two').hasClass('selected'))
 {
     // Allow things to be dragged only to bag two
 }
 if($('.bag.three').hasClass('selected'))
 {
     // Allow things to be dragged only to bag three
 }

あなたのコードは大きすぎて、すべてを実装することはできません。これにより、進むべき正しい方向が示されるはずです。他に何かお手伝いできることがあればコメントください

-----巨大な編集-----

(私はあなたの状況を正すためにここまで一生懸命働くべきではありませんでしたが、あなたの立場が悪いので、そうしました)

コードのフォーマットを修正するためにいくつかの大規模な変更を行った後、再利用のためにコードを最適化し (そしてその過程で何百行もの不要なコードを削除)、以前に作成した if ステートメントを に移動してsetInterval、現在の情報で更新するようにチェックし、修正しました。あなたの貧弱なCSSの多くは、私がこの大まかな更新を思いつきました

そのためのコードは次のとおりです。

<!-- HTML -->
<div id="body">
    <div class="bag one">
        Bag 1
        <img src="images/sb1.jpg" height="50" width="50" />
    </div>

    <div class="bag two">
        Bag 2
        <img src="images/sb2.jpg" height="50" width="50" />
    </div>

    <div class="bag three">
        Bag 3
        <img src="images/sb3.jpg" height="50" width="50" />
    </div>

    <div class="products" style="width: 120px; height: 100px; left: 23px; top: 120px;">
        <ul>
            <li> <a href="#" class="item one">
                    <img src="images/shirt2.gif" height="45" width="45"/>
                    <div>
                        <p>item1_1</p>
                        <p>Price:$25</p>
                    </div>
                </a>

            </li>
        </ul>
    </div>
    <br>
    <div class="products" style="width: 120px; height: 100px; left: 30px; top: 225px;">
        <ul>
            <li> <a href="#" class="item two">
                    <img src="images/shoes1.gif" height="45" width="45"/>
                    <div>
                        <p>item2_1</p>
                        <p>Price:$30</p>
                    </div>
                </a>

            </li>
        </ul>
    </div>
    <div class="products" style="width: 120px; height: 144px; left: 34px; top: 342px;">
        <ul>
            <li> <a href="#" class="item three">
                    <img src="images/shirt2.gif" height="45" width="45"/>
                    <div>
                        <p>item3_1</p>
                        <p>Price:$25</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <br>
    <div class="cart" style="left: 200px; top: 150px; height: 300px; width: 237px">
        <div class="ctitle">Shopping Cart</div>
        <div style="background:#fff">
            <table id="cartcontent1" fitColumns="true" style="width1:300px;height:auto;">
                <thead>
                    <tr>
                        <th field="name" width=140>Name</th>
                        <th field="quantity" width=60 align="right">Quantity</th>
                        <th field="price" width=60 align="right">Price</th>
                        <th field="remove" width=60 align="right">Remove</th>
                    </tr>
                </thead>
            </table>
        </div>
        <p class="total">Total: $0</p>
        <div class="ctitle" style="position:absolute;bottom:10px"></div>
    </div>
</div>

<!-- CSS -->
.bag {
    width:80px;
    float:left;
    text-align:center;
}
.products {
    position:fixed;
    height:100%;
    background:#fafafa;
}
.products ul {
    list-style:none;
    margin:0;
    padding:0px;
}
.products li {
    display:inline;
    float:left;
    margin:10px;
}

.item {
    display:block;
    text-decoration:none;
}
.item img {
    border:1px solid #333;
}
.item p {
    margin:0;
    font-weight:bold;
    text-align:center;
    color:#c3c3c3;
}
.cart {
    position:absolute;
    width:260px;
    height:100%;
    background:#ccc;
    padding:0px 10px;
}
.ctitle {
    text-align:center;
    color:#555;
    font-size:18px;
    padding:10px;
}
.auto-style3 {
    float: right;
    position: relative;
    width: 260px;
    height: 100%;
    background: #ccc;
    padding: 0px 10px;
    margin-bottom: 0px;
}
.selected {
    background-color: #FFFF00;
}

<!-- Javascript/jQuery-->
var data = {
    "total": 0,
        "rows": []
};
var totalCost = 0;
$(document).ready(function () {
    $('#cartcontent1').datagrid({
        singleSelect: true
    });


    $('.item').draggable({
        revert: true,
        proxy: 'clone',
        onStartDrag: function () {
            $(this).draggable('options').cursor = 'not-allowed';
            $(this).draggable('proxy').css('z-index', 10);
        },
        onStopDrag: function () {
            $(this).draggable('options').cursor = 'move';
        }
    });


    $('.bag').click(function () {
        if ($('.selected').length > 0 && !$(this).hasClass('selected')) { // Checks to see if there is a selected and if the clicked one is selected
            $('.selected').removeClass('selected');
            $(this).addClass('selected');
        } else if ($(this).hasClass('selected')) {
            // Allows a bag to be toggled when clicked
            $(this).removeClass('selected');
        } else {
            // If there is no bag `selected` then make the clicked one selected
            $(this).addClass('selected');
        }
    });
});

var check = setInterval(function() {    
    if ($('.bag.one').hasClass('selected')) {

        $('.bag.one').droppable({
            accept: '.item.one,.item.two,.item.three',
            onDragEnter: function (e, source) {
                $(source).draggable('options').cursor = 'auto';
            },
            onDragLeave: function (e, source) {
                $(source).draggable('options').cursor = 'not-allowed';
            },
            onDrop: function (e, source) {
                var name = $(source).find('p:eq(0)').html();
                var price = $(source).find('p:eq(1)').html();
                addProduct(name, parseFloat(price.split('$')[1]));
            }
        });
    } else if ($('.bag.two').hasClass('selected')) {
        $('.bag.two').droppable({
            accept: '.item.two,.item.three',
            onDragEnter: function (e, source) {
                $(source).draggable('options').cursor = 'auto';
            },
            onDragLeave: function (e, source) {
                $(source).draggable('options').cursor = 'not-allowed';
            },
            onDrop: function (e, source) {
                var name = $(source).find('p:eq(0)').html();
                var price = $(source).find('p:eq(1)').html();
            }
        });
    } else if ($('.bag.three').hasClass('selected')) {
        // Allow things to be dragged only to bag three
        $('.bag.three').droppable({
            accept: '.item.three',
            onDragEnter: function (e, source) {
                $(source).draggable('options').cursor = 'auto';
            },
            onDragLeave: function (e, source) {
                $(source).draggable('options').cursor = 'not-allowed';
            },
            onDrop: function (e, source) {
                var name = $(source).find('p:eq(0)').html();
                var price = $(source).find('p:eq(1)').html();
            }
        });
    }
}, 100);

function addProduct(name, price) {
    var totalQuantity = sumQuantity(data);

    if (totalQuantity < 8) {
        function add() {
            for (var i = 0; i < data.total; i++) {
                var row = data.rows[i];
                if (row.name == name) {
                    row.quantity += 1;
                    return;
                }
            }
            data.total += 1;
            data.rows.push({
                name: name,
                quantity: 1,
                price: price,
                remove: '<a href="#" class="remove" onclick="removeProduct(this, event)">X</a>'
            });
        }
        add();
        totalCost += price;
        $('#cartcontent1').datagrid('loadData', data);
        $('div.cart .total').html('Total: $' + totalCost);
    } else {
        alert('cannot have more than 8 items');
    }
}

function removeProduct(el, event) {
    var tr = $(el).closest('tr');
    var name = tr.find('td[field=name]').text();
    var price = tr.find('td[field=price]').text();
    var quantity = tr.find('td[field=quantity]').text();
    for (var i = 0; i < data.total; i++) {
        var row = data.rows[i];
        if (row.name == name) {
            data.rows.splice(i, 1);
            data.total--;
            break;
        }
    }
    totalCost -= price * quantity;
    $('#cartcontent1').datagrid('loadData', data);
    $('div.cart .total').html('Total: $' + totalCost);
}

function sumQuantity(data) {
    var sum = 0;
    for (var i = 0; i < data.total; i++) {
        sum += data.rows[i].quantity;
    }
    return sum;
}

$(this).droppable("option", "disabled", true);のようなものを使用して他のものを無効にし、そうである場合は再度有効にし、バッグ2と3にも対処する必要があるという点で、まだ修正する必要がありますselectedが、これにより、さらに多くの作業が可能になります

簡単な質問: 他のバッグ用に複数のカートを用意する予定はありますか? なぜあなたが3つのバッグを持っているのかよくわかりません...

お持ち帰り... (できれば):

  1. オンラインでコーディングする方法を学びます。これにより、問題の解決、最適化、および単純にすべての作業が大幅に改善されます。詳細については、CodeAcademy などのチュートリアル Web サイトを使用してください。Web 上でコーディングするには、Web コーディングの基礎が必要です
  2. 可能な限りコードを再利用してください。非常によく似た特性を持つ同じタイプの要素が複数ある場合は、それぞれをハードコーディングするのではなく、クラスを使用してみてください。これがクラスの目的です。
  3. 他人に尋ねる前に自分で試してみてください。あなたが質問をしたとき、あなたは自分でやろうとしたという証拠を何も提供しませんでした. ここで質問する前に、何日もかけて問題に取り組んでください
  4. コードをきれいに保ちます。間隔を正しく使用し、すべての()と が一列に{}並んでいることを確認してください。変数に認識可能な名前を付けるのが上手だったので、それは良いことです
  5. コードにエラーがないか確認してください。調べてみると、簡単に修正できるいくつか</div>の欠落、スペルミス、欠落、およびその他のエラーが見つかりました。</li>それはただの不注意です
  6. jsFiddle または<style>Web ページのタグでCSS パネルを使用して、要素のスタイルを設定します。これにより、何が何に影響を与えているかを正確に確認することが非常に簡単になります。インライン スタイリングは絶対に避けるべきです
  7. ブラウザのエレメント インスペクタとコンソール ログの活用方法を学びます。いくつかの問題を修正するのが非常に簡単になり、他の多くのものを実行しているときに要素がどのようなスタイルを持っているかを正確に確認するのに役立ちます.

この記事は長くなりすぎましたが、お役に立てば幸いです。本当に、仕事を続ける前に、JavaScript、HTML、CSS、および jQuery の知識の基礎を固める必要があります。それが今のあなたの最優先事項です。

最後に（これは手紙のように感じるので）：

「デバッグがバグを取り除くプロセスであるなら、プログラミングはそれらを組み込むプロセスでなければなりません。」- エドガー・ダイクストラ

かなりプログラミングをしていたに違いありません^^

-----最終編集-----

私は本当にこれで頑張りすぎました。あなたは私に借りがあります。

とにかく、完全に機能するように全体を再構築しました。私のコンセプトが正しいことを確認するために、一種のミニバージョンを作成する必要がありました。HTMLに追加のデータスコープがいくつかあることがわかりました...

私が機能していない唯一のものは、削除ボタン (表の X) です。なぜそれが機能しなくなったのか、私にはまったくわかりません。すべてのコードをトリプルチェックして、以前と同じであることを確認しました。

更新されたコード:

/* HTML */
<div id="body">
    <div class="bag one" data-scope="one, two, three">Bag 1
        <img src="images/sb1.jpg" height="50" width="50" />
    </div>
    <div class="bag two" data-scope="two, three">Bag 2
        <img src="images/sb2.jpg" height="50" width="50" />
    </div>
    <div class="bag three" data-scope="three">Bag 3
        <img src="images/sb3.jpg" height="50" width="50" />
    </div>
    <div class="products" style="width: 120px; height: 100px; left: 23px; top: 120px;">
        <ul>
            <li> <a href="#" class="item one" data-scope="one">
                    <img src="images/shirt2.gif" height="45" width="45"/>
                    <div>
                        <p>item1_1</p>
                        <p>Price:$25</p>
                    </div>
                </a>

            </li>
        </ul>
    </div>
    <br>
    <div class="products" style="width: 120px; height: 100px; left: 30px; top: 225px;">
        <ul>
            <li> <a href="#" class="item two" data-scope="two">
                    <img src="images/shoes1.gif" height="45" width="45"/>
                    <div>
                        <p>item2_1</p>
                        <p>Price:$30</p>
                    </div>
                </a>

            </li>
        </ul>
    </div>
    <div class="products" style="width: 120px; height: 144px; left: 34px; top: 342px;">
        <ul>
            <li> <a href="#" class="item three" data-scope="three">
                    <img src="images/shirt2.gif" height="45" width="45"/>
                    <div>
                        <p>item3_1</p>
                        <p>Price:$25</p>
                    </div>
                </a>

            </li>
        </ul>
    </div>
    <br>
    <div class="cart" style="left: 200px; top: 150px; height: 300px; width: 237px">
        <div class="ctitle">Shopping Cart</div>
        <div style="background:#fff">
            <table id="cartcontent1" fitColumns="true" style="width1:300px;height:auto;">
                <thead>
                    <tr>
                        <th field="name" width=140>Name</th>
                        <th field="quantity" width=60 align="right">Quantity</th>
                        <th field="price" width=60 align="right">Price</th>
                        <th field="remove" width=60 align="right">Remove</th>
                    </tr>
                </thead>
            </table>
        </div>
        <p class="total">Total: $0</p>
        <div class="ctitle" style="position:absolute;bottom:10px"></div>
    </div>
</div>

/* CSS */
.bag {
    width:80px;
    float:left;
    text-align:center;
}
.products {
    position:fixed;
    height:100%;
    background:#fafafa;
}
.products ul {
    list-style:none;
    margin:0;
    padding:0px;
}
.products li {
    display:inline;
    float:left;
    margin:10px;
}
.item {
    display:block;
    text-decoration:none;
}
.item img {
    border:1px solid #333;
}
.item p {
    margin:0;
    font-weight:bold;
    text-align:center;
    color:#c3c3c3;
}
.cart {
    position:absolute;
    width:260px;
    height:100%;
    background:#ccc;
    padding:0px 10px;
}
.ctitle {
    text-align:center;
    color:#555;
    font-size:18px;
    padding:10px;
}
.auto-style3 {
    float: right;
    position: relative;
    width: 260px;
    height: 100%;
    background: #ccc;
    padding: 0px 10px;
    margin-bottom: 0px;
}
.selected {
    background-color: #FFFF00;
}

/* javascript/jQuery */
$(document).ready(function () {
    var data = {
        "total": 0,
            "rows": []
    };
    var totalCost = 0;
    $('#cartcontent1').datagrid({
        singleSelect: true
    });

    $('.item').each(function (index, div) {
        var scope = $(this).attr('data-scope');
        $(div).draggable({
            revert: true,
            proxy: 'clone',
            onStartDrag: function () {
                $('.bag:not(.bag[data-scope*=' + scope + '])').droppable('disable');
                if($('.selected').length > 0)
                    $(':not(.selected)').droppable('disable');
                $(this).draggable('options').cursor = 'not-allowed';
                $(this).draggable('proxy').css('z-index', 10);
            },
            onStopDrag: function () {
                $('.bag').droppable('enable');
                $(this).draggable('options').cursor = 'move';
            }
        });
    });

    $('.bag').click(function () {
        if ($('.selected').length > 0 && !$(this).hasClass('selected')) {
            $('.selected').removeClass('selected');
            $(this).addClass('selected');
        } else if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
        } else {
            $(this).addClass('selected');
        }
    });

    $('.bag').droppable({
        onDrop: function (e, source) {
            var name = $(source).find('p:eq(0)').html();
            var price = $(source).find('p:eq(1)').html();
            addProduct(name, parseFloat(price.split('$')[1]));
            $(source.draggable).remove();
            $('.bag').droppable('enable');
        }
    });

    function addProduct(name, price) {
        var totalQuantity = sumQuantity(data);

        if (totalQuantity < 8) {
            function add() {
                for (var i = 0; i < data.total; i++) {
                    var row = data.rows[i];
                    if (row.name == name) {
                        row.quantity += 1;
                        return;
                    }
                }
                data.total += 1;
                data.rows.push({
                    name: name,
                    quantity: 1,
                    price: price,
                    remove: '<a href="#" class="remove" onclick="removeProduct(this, event)">X</a>'
                });
            }
            add();
            totalCost += price;
            $('#cartcontent1').datagrid('loadData', data);
            $('div.cart .total').html('Total: $' + totalCost);
        } else {
            alert('cannot have more than 8 items');
        }
    }

    function removeProduct(el, event) {
        var tr = $(el).closest('tr');
        var name = tr.find('td[field=name]').text();
        var price = tr.find('td[field=price]').text();
        var quantity = tr.find('td[field=quantity]').text();
        for (var i = 0; i < data.total; i++) {
            var row = data.rows[i];
            if (row.name == name) {
                data.rows.splice(i, 1);
                data.total--;
                break;
            }
        }
        totalCost -= price * quantity;
        $('#cartcontent1').datagrid('loadData', data);
        $('div.cart .total').html('Total: $' + totalCost);
    }

    function sumQuantity(data) {
        var sum = 0;
        for (var i = 0; i < data.total; i++) {
            sum += data.rows[i].quantity;
        }
        return sum;
    }
});

これが私があなたのためにやろうとしているすべてです。特に質問を投稿してからあなたが0の助けを提供したので、それはあなたが値する以上のものです. 誰にもこれほど期待しないでください。

これが私が触れている最後の Fiddle です。良い一日を過ごしてください

于 2013-07-31T17:58:06.167 に答える