rita,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
div[id^="drag"] {
background-color: orange;
height: 3rem;
width: 6rem;
display: inline-block;
}
div[id^="div"] {
padding: 8px;
border: 3px solid #5aff10;
background-color: #23cc3c;
border-radius: 23px;
padding: 18px;
width: 12rem;
width: 35rem;
}
.drags{
opacity: .3;
}
</style>
<script>
$(function() {
var divsDrag = $("#enlg > div");
var divsDrop = $("#prepos > div");
divsDrag.each(function(i, el) {
$(el).draggable();
divsDrop.eq(i).droppable({
accept: el,
hoverClass: "drags",
drop: function() {
$(this).addClass("ui-state-highlight")
.html("<b>" + 'HELLO');
$(el).html('Hello!').hide(2000);
}
})
})
});
</script>
</head>
<body>
<div id="enlg">
<div id="drag1">
<b>drag1</b>
</div>
<div id="drag2">
<b>drag2</b>
</div>
<div id="drag3">
<b>drag3</b>
</div>
</div>
<div id="prepos">
<div id="div1">
Я <b>div1</b>
</div>
<div id="div2">
Я <b>div2</b>
</div>
<div id="div3">
Я <b>div3</b>
</div>
</div>
</body>
</html>
|