0

プログラミングとjqueryの初心者。とても単純に思える質問がありますが、理解できません。お役に立てれば大変助かります

ドロップ可能なオブジェクトに値を追加して、オブジェクトがドロップ可能な領域にドロップされたときに割り当てられた値を登録するにはどうすればよいですか? また、複数のオブジェクトも追加する必要があります。

たとえば、オブジェクト 1 = 10、オブジェクト 2 = 25 などです。オブジェクトがドロップされると、カウンターに値が表示されます。

したがって、オブジェクト 1 がドロップされると 10 が登録され、オブジェクト 2 もドロップされると、カウンターは登録され、両方のオブジェクトを追加すると 35 が表示されます。

ありがとう

4

3 に答える 3

1

data-drag-valueドラッグ可能なアイテムなどでデータ属性を使用し、ドロップ イベントでこれを取得できます。

HTML:

<div style="float:left">
    <ul id="myDragList">
        <li data-drag-value="1">One</li>
        <li data-drag-value="2">Two</li>
        <li data-drag-value="3">Three</li>
    </ul>
</div>
<div id="myDroppable">Drop here
    <div id="info"></div>
</div>

JavaScript:

$(document).ready(function () {
    $("#myDragList li").draggable();
    $("#myDroppable").droppable({
        drop: function (event, ui) {
            dragValue = ui.draggable.attr("data-drag-value");
            $("#info").html("data-drag-value = " + dragValue);
        }
    });
});

ここで私の JSFiddle の例を見てください。

http://jsfiddle.net/markwylde/Ga34x/

于 2013-08-23T12:40:28.160 に答える
0

働くフィドルDEMO

これを試して

これらのタグを head タグに追加します。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

コード

$(function () {
    var drg;
    var a = 0;
    var cln;
    var i = 0;
    $(".ui-widget-content").draggable({ //div with the class'ui-widget-content' is set draggable
        drag: function (event, ui) {      
            drg = $(this);                // on drag gets which div is it
            $("#droppable").droppable('enable');  // enabling drop of droppable div 
        },
        helper: 'clone'          // this to get the clone copy of the div on drag         

    });

    $("#droppable").droppable({

        drop: function () {       

            a = a + parseInt(drg.attr('value'));   //get the value of the dropped div add to the total
            $("#counter").html(a);
            if ($("#" + drg.text()).length > 0) {   // if droppable div already contains the same div eg'toy', then only the number to be increased
                var txt = drg.text() + "1";
                $("#" + txt).html(parseInt($("#" + txt).text()) + 1);
            } else

            {             // else append the div to the droppable div
                $(this).append("<div id=" + drg.text() + " value=" + drg.attr('value') + ">" + drg.text() + "</div>");


                $(this).append("<div id='" + drg.text() + "1' style='float:right'>" + $("#" + drg.text()).length + "</div><br>");  // lenght of the div eg:' toy    1' ,where 1 is the length
            }
            $("#" + drg.text()).draggable({   // enable the div dropped eg:'toy' in the droppable div to be draggable
                drag: function (event, ui) {
                    $("#droppable").droppable('disable'); // on drag of it disable drop to the droppable div
                    drg = $(this);  //get which div is dragged

                },
                stop: function (event, ui) {   // on drag end or dropped
                    var tt = drg.text() + "1";
                    if (parseInt($("#" + tt).text()) > 1) {  //eg: if in case 'toy' length >1 ie 'toy    3'
                        $("#" + tt).html(parseInt($("#" + tt).text()) - 1); //reduce the length field by 1


                    } else {    // else remove the field out of droppable div

                        $("#" + drg.text()).remove();

                        $(this).remove();
                        $("#" + tt + " + br ").remove();
                        $("#" + tt).remove();

                    }
                    a = a - parseInt(drg.attr('value'));  // reduce the div value from total amount
                    $("#counter").html(a);

                },
                helper: 'clone'    

            });
        }

    });

});

html

<div class="ui-widget-content" value="30">toy</div>
<br>
<div class="ui-widget-content" value="20">pencil</div>
<br>
<div class="ui-widget-content" value="10">pen</div>
<div id="droppable" class="ui-widget-header"></div>
<div style="float:bottom">Total : $</div>
<div id="counter">0</div>

CSS

div {
    float: left;
}
#droppable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    float: left;
    margin: 10px;
    border:3px solid;
}

これが役に立てば幸いです、ありがとう

于 2013-08-24T18:29:28.763 に答える
0

更新されたデモ

これを試して

最初にこれらのタグを head タグに追加します。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

コード

       $(function () {
  var drg;
    var a=0;
    $(".ui-widget-content").draggable({
         drag: function (event, ui) {
            drg=$(this);
            }
    });
    $("#droppable").droppable({
       out        : function(){

            a= a-parseInt(drg.attr('value'));
            $("#counter").html(a);

        },
       drop  : function(){
       a= a+parseInt(drg.attr('value'));
       $("#counter").html(a);
    }
    });
});

HTML

<div class="ui-widget-content" value="30">
toy</div>
<br>
<div class="ui-widget-content" value="20">
pencil</div>
    <br>
<div  class="ui-widget-content" value="10">
pen</div>

<div id="droppable" class="ui-widget-header"></div>
<div id="counter"></div>
于 2013-08-23T12:52:47.607 に答える