Как перетащить div в коробки - PullRequest
Новая
       1

Как перетащить div в коробки

0 голосов
/ 06 октября 2010

У меня есть следующий код, который позволяет перетаскивать div в 3 поля.
Я пытаюсь заставить перетаскиваемый элемент div вписаться в коробку из тех элементов, которые вы на него упали, потому что в данный момент он падает на него, но при этом позволяет его перетаскивать в любое место окна. 1002 * 

 <div id="drop1" class="dropzone">Accepts the element if fits inside</div>
 <div id="drop2" class="dropzone">Accepts the element if intersects</div>
 <div id="drop3" class="dropzone">Accepts the element if pointer hovers</div>
 <div id="drag" class="dropaccept">Drag me</div>
 <script type="text/javascript">
  $(document).ready(
function()
{
    $('#drag').Draggable();
    $('#drop1').Droppable(
        {
            accept :        'dropaccept', 
            activeclass:    'dropactive', 
            hoverclass:     'drophover',
            tolerance:      'intersect'
        }
    );
    $('#drop2').Droppable(
        {
            accept :        'dropaccept', 
            activeclass:    'dropactive', 
            hoverclass:     'drophover',
            tolerance:      'intersect'
        }
    );
    $('#drop3').Droppable(
        {
            accept :        'dropaccept', 
            activeclass:    'dropactive', 
            hoverclass:     'drophover',
            tolerance:      'intersect'
        }
    );
}
 );
</script>

1 Ответ

1 голос
/ 06 октября 2010

То, что у вас есть , не должно работать, оно должно быть .draggable() и .droppable() (в нижнем регистре).Для другой части укажите revert параметр , например: 

$('#drag').draggable({ revert: 'invalid' });

Также accept является селектором, поэтому измените его на .dropaccept следующим образом: 

$('#drop1').droppable(
    {
        accept :        '.dropaccept', 
        activeClass:    'dropactive', 
        hoverClass:     'drophover',
        tolerance:      'intersect'
    }
);

Обратите внимание на изменения в корпусе и других свойств, JavaScript чувствителен к регистру !

Вы можете проверить это здесь .

...