jquery droppable не работает

Ребята. Я провел несколько часов только для проверки моего jquery, почему это не работает. Просто путайте, почему функция droppable не срабатывает, когда квадрат div упал в div div.jquery droppable не работает

Вот мой HTML

<html> 
<head> 
<title>jquery - draggable </title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 

    <script src="js/javascript.js"></script> 
</head> 
<body> 
<div class="container"> 
    <div id="square"></div> 
    <br>   
    <div id="box"></div> 
</div> 
</body> 
</html>

И это мой стиль

#box { 
    margin: 0 auto; 
    background: #ecf0f1; 
    border-radius: 10px; 
    border-style: dashed; 
    height: 100px; 
    width: 100px; 
} 
#square { 
    margin: 0 auto; 
    background: #3498db; 
    border-radius: 10px; 
    height: 100px; 
    width: 100px; 
}

И это мой Javascript

$(document).ready(function(){ 
    $("#square").draggable(); 

    $("#box").droppable({ 
     drop: handleDropEvent 
    }); 

    function handleDropEvent(event, ui){ 
     alert('Hello'); 
    } 

});

Любая помощь будет оценена. Спасибо!

источник

2014-09-22 Sonic Master

Вот моя http://jsfiddle.net/p0n27hcz/2/ –

Ваша скрипка отлично работает для меня на Firefox. –

Не то, о чем я смущен. Почему в Chrome это плохо работает, Фредерик Хамиди? –

Play with droppables tolerance опция.

"fit": Draggable полностью перекрывает отбрасываемый.
«intersect»: Draggable перекрывает отбрасываемый как минимум 50% в обоих направлениях.
"pointer": указатель мыши перекрывает droppable.
«touch»: Draggable перекрывает отбрасываемую любую сумму.

$(document).ready(function(){ 
 
    $("#square").draggable(); 
 

 
    $("#box").droppable({ 
 
     drop: handleDropEvent, 
 
     \t tolerance:"pointer" 
 
    }); 
 

 
    function handleDropEvent(event, ui){ 
 
     alert('Hello'); 
 
    } 
 

 
});

#box { 
 
    margin: 0 auto; 
 
    background: #ecf0f1; 
 
    border-radius: 10px; 
 
    border-style: dashed; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
#square { 
 
    margin: 0 auto; 
 
    background: #3498db; 
 
    border-radius: 10px; 
 
    height: 100px; 
 
    width: 100px; 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
<title>jquery - draggable </title> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 

 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
 

 
    <script src="js/javascript.js"></script> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <div id="square"></div> 
 
    <br>   
 
    <div id="box"></div> 
 
</div> 
 
</body> 
 
</html>

источник

2014-09-22 08:41:43 SCHTAILian

Whoaaaaa! Большое вам спасибо, Штайлиан. Теперь это работа как хрома, так и мозиллы. –

Ницца, пожалуйста. – SCHTAILian

это фактически не превратило бы квадратный div в коробку. Скорее всего, вам всегда потребуется перетащить квадрат и поместить курсор мыши вместе с div на поле. –

$("#box").droppable({ 
     drop: handleDropEvent, 
     tolerance:"pointer" 
    });

будет работать, как объяснено SCHTAILian. Но это заставило бы вас держать указатель внутри div #box, поэтому droppable #square пчел бы правильно упал на него.

здесь Другой подход скрипку http://jsfiddle.net/naeemshaikh27/p0n27hcz/3/

просто удалить

margin:auto;

источник

2014-09-22 08:59:25

ответ

Смежные вопросы