como fazer drag and drop jquery?
Tenho estado a pensar como fazer drag and drop com jQuery, porque é difícil usar o JavaScript drag and drop, e eu prefiro usar jQuery em vez de javascript. O que eu quero é que a criança mergulhe, e só seja babável nas Divas dos pais. Quando o div filho é descartado, se ele não está em um div pai, então ele vai voltar para o último div pai em que ele estava. se o div filho foi largado em um div pai, então ele vai para o canto superior esquerdo do div pai foi deixado cair. A criança div é apenas arrastável. Não me importo de usar o jQuery UI, mas não consegui.função droppable () para funcionar.
HTML:
<div id="div1" class="div">
<div id="image" class="image"></div>
</div>
<div id="div2" class="div">
</div>
CSS:
.div {
float: left;
margin-left: 5px;
height: 200px;
width: 200px;
border: 3px solid black
}
.image {
height: 50px;
width: 50px;
background-color: khaki;
}
JQuery (apenas arrastar)):
$("document").ready(function() {
$(".image").draggable();
});
Jsfiddle: https://jsfiddle.net/j9pvbuue/8/ Gostaria muito que me desse directamente um código para a resposta, em vez de respostas indirectas que não me digam como usá-la.
2 answers
JQuery não tem draggable API.
Pode utilizar jQuery UI draggable e jQuery UI droppable ou utilizar HTML5 arrastar e largar a API.
Actualizar
De acordo com a descrição actualizada da pergunta original, Código da solução de demonstração:
$("document").ready(function() {
$(".child").draggable({
revert: true
});
$(".parent").droppable({
accept: '.child',
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
}); .parent {
float: left;
margin-left: 5px;
height: 200px;
width: 200px;
border: 3px solid black
}
.child {
height: 50px;
width: 50px;
background-color: khaki;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
</div>
<div class="parent">
</div>Podias usar javascript.
O meu código é através do javascript:
var CloneElement=document.getElementByID("ElementID").clone(true);
document.getElementByID("TargetSectionID").appendChild(CloneElement);