Форум

rita · #1 (**permalink**) 05.02.2021, 21:02

Использую JQUERY UI, при перетаскивании элемента drag на div, исчезает последний элемент , хотя должен исчезать после его перетаскивания - каждый элемент, по факту только последний.
Что сделать, чтобы после перетаскивания элемента он исчезал?

<link href="JQ/jquery-ui.css" rel="stylesheet">
<script src="JQ/external/jquery/jquery.js"></script>
<script src="JQ/jquery-ui.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;
</style>

<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>
<script>
$(document).ready(function() {
var drag="#drag";
for(i=1; i<=3;i++){
var a=String(i);
var b="#drag"+a;
var c="#div"+a;
console.log(b+','+c);
$(b).draggable(700);
   $(c).droppable({accept:b,hoverClass:"drags"},{drop:function(){
   $(this).addClass("ui-state-highlight");
     $(this).html("<b>"+'HELLO');
$(b).html('Hello!').hide( 2000);
   }})}});
</script>

рони · #2 (**permalink**) 05.02.2021, 21:40

Сообщение от rita

Что сделать, чтобы после перетаскивания элемента он исчезал?

использовать let вместо var или each вместо for.
почему так читать тут
НЕ срабатывает цикл for

рони · #3 (**permalink**) 05.02.2021, 21:58

rita,

Сообщение от рони

each вместо for.

<!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>

rita · #4 (**permalink**) 13.02.2021, 16:53

Сообщение от рони

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>

Спасибо, это то что нужно.

Форум

Справочник

Discord чат

Курсы javascript