jQuery Draggable / Droppable компоненты таргетинга - PullRequest
Новая
       10

jQuery Draggable / Droppable компоненты таргетинга

1 голос
/ 14 апреля 2011

У меня есть стоковая настройка для перетаскивания. В основном это будет мозаика, но простая, где правильные части привязываются к нужным областям. У меня есть осколки и кусочки головоломки. Однако, когда я перетаскиваю часть 1 на место 2, она не отображается как недействительная. Как мне различать зоны таргетинга?

HTML: 

<div id="drag">
    <div id="piece-drag">
        <div id="piece1">
            <img src="anim/hoffmann3-anklebridge/pin 1.png" />
        </div>
        <div id="piece2">
            <img src="anim/hoffmann3-anklebridge/pin 2.png" />
        </div>
    </div>
    <div id="place-drop" style="background:url(puzzleshape.png) no-repeat;">
        <div id="piece1drop" style="width:103px; height:36px; position:absolute; z-index:50; top:346px; left:241px;"></div>
        <div id="piece2drop" style="width:103px; height:36px; position:absolute; z-index:50; top:333px; left:228px;"></div>
    </div>
</div>

JQuery: 

$(function(){
            $("#piece1").draggable({ revert: "invalid" });
            $("#piece1drop").droppable({
                drop: function() { 
                    $('#piece1').hide();
                    $('#piece1drop').css('background-image', 'url("piece1placed.png")');
                }
            });
            $("#piece2").draggable({ revert: "invalid" });
            $("#piece2drop").droppable({
                drop: function() { 
                    $('#piece2').hide();
                    $('#pin2drop').css('background-image', 'url("piece2placed.png")');
                }
            });
        });

1 Ответ

1 голос
/ 14 апреля 2011

Добавьте accept: "#selector" в качестве опции к плагину для отбрасывания: 

$(function(){
            $("#piece1").draggable({ revert: "invalid" });
            $("#piece1drop").droppable({
                drop: function() { 
                    $('#piece1').hide();
                    $('#piece1drop').css('background-image', 'url("piece1placed.png")');
                },
                accept: "#piece1"
            });
            $("#piece2").draggable({ revert: "invalid" });
            $("#piece2drop").droppable({
                drop: function() { 
                    $('#piece2').hide();
                    $('#pin2drop').css('background-image', 'url("piece2placed.png")');
                },
                accept: "#piece2"
            });
    });

Вот демоверсия jQuery

...