jqueryUI, принять, если контейнер drop to соответствует требованиям - PullRequest
Новая
       55

jqueryUI, принять, если контейнер drop to соответствует требованиям

0 голосов
/ 02 августа 2020

в документации JqueryUi упоминается, что есть способ проверить, соответствует ли элемент, который пользователь «перетаскивает», требованиям, используя: 

accept: function(el) {
    return CHECK_REQUIREMENTS;
}

, но как можно проверить, является ли целевой элемент ( контейнер, в который пользователь пытается поместить элемент), который соответствует некоторым критериям?

Мой код: 

<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        
        <style>
            * * {
              box-sizing: border-box;
            }

            .search-container {
              display: flex;
              flex-wrap: wrap;
              width: 33%;
              min-height: 200px;
              border: 1px solid red;
            }

            .search-item {
              border: 1px solid grey;
              text-align: center;
              margin: 5px;
              width: 150px;
              max-width: 300px;
              flex-basis: 150px;
              flex-grow: 1;
              height: 80px;
            }
        </style>
        
    </head>
    
    <body>
        <div id="myContainer">
        
            <div id="firstContainer" class="search-container acceptableContainer" style="float:left">
              <div class="search-item acceptable">first</div>
              <div class="search-item acceptable">two</div>
              <div class="search-item acceptable">three</div>
              <div class="search-item acceptable">four</div>
              <div class="search-item acceptable">five</div>
              <div class="search-item">six</div>
              <div class="search-item">seven</div>
              <div class="search-item">eight</div>
              <div class="search-item">nine</div>
            </div>
            
            <div id="secondContainer" class="search-container" style="float:left">
            </div>
            
            <div id="thirdContainer" class="search-container acceptableContainer">
            </div>
        
        </div>
    </body>
    
    <script>
        
        $(".search-item").draggable({ 
            revert: 'invalid'
        });
        
        $(".search-container").droppable({
            accept: function(el) {
                return el.hasClass('acceptable');
            },
            drop: function( event, ui ) {
               var droppable = $(this);
               var draggable = ui.draggable;
               draggable.appendTo(droppable);
               draggable.css({top: '0px', left: '0px'});
            }
        }); 
        
    </script>
    
</html>

Итак, этот код проверяет, имеет ли «перетаскивание» класс acceptable.

Например, я хотел бы проверить, имеет ли целевой контейнер класс acceptableContainer, и принять операцию только в том случае, если он вернет true (поэтому secondContainer не может быть целевым контейнером).

Как можно с этим справиться?

Ответы [ 2 ]

0 голосов
/ 03 августа 2020

Учтите следующее. 

$(function() {
  $(".search-item").draggable({
    revert: 'valid'
  });

  $(".search-container").droppable({
    accept: '.acceptable',
    drop: function(event, ui) {
      var droppable = $(this);
      var draggable = ui.draggable;
      if (droppable.hasClass("acceptableContainer")) {
        draggable.appendTo(droppable);
        draggable.css({
          top: '0px',
          left: '0px'
        });
      } else {
        return false;
      }
    }
  });
});
* * {
  box-sizing: border-box;
}

.search-container {
  display: flex;
  flex-wrap: wrap;
  width: 33%;
  min-height: 200px;
  border: 1px solid red;
}

.search-item {
  border: 1px solid grey;
  text-align: center;
  margin: 5px;
  width: 150px;
  max-width: 300px;
  flex-basis: 150px;
  flex-grow: 1;
  height: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="myContainer">

  <div id="firstContainer" class="search-container acceptableContainer" style="float:left">
    <div class="search-item acceptable">first</div>
    <div class="search-item acceptable">two</div>
    <div class="search-item acceptable">three</div>
    <div class="search-item acceptable">four</div>
    <div class="search-item acceptable">five</div>
    <div class="search-item">six</div>
    <div class="search-item">seven</div>
    <div class="search-item">eight</div>
    <div class="search-item">nine</div>
  </div>

  <div id="secondContainer" class="search-container" style="float:left">
  </div>

  <div id="thirdContainer" class="search-container acceptableContainer">
  </div>

</div>

Вам нужно будет вернуть false, чтобы вызвать откат при сбросе. Это что-то вроде обратного логи c.

0 голосов
/ 03 августа 2020

Внутри события .drop вы проверяете условие и, если оно выполняется, продолжаете операцию, такую ​​как добавление в новое местоположение et c. Также измените свойства css, чтобы они соответствовали позиционированию в новом месте, и, если условия не выполняются, установите для параметра «revert» параметра draggable значение «true», Часть ниже может не понадобиться Результаты неоднозначны [затем сбросьте его на «недействительный» внутри .stop события перетаскивания. Клавиша .stop of draggable вызывается после .drop of droppable.] 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Droppable </title>

    <link rel="stylesheet" href="jquerylib/jquery-ui.css" />
    <script src="jquerylib/jquery.js"></script>
    <script src="jquerylib/jquery-ui.js"></script>

    <!--<link rel="stylesheet" href="css/styles.css" />-->
    <style>
        .boxMain {
            width: 40%;
            height: 400px;
            background-color: yellow;
            border: 3px solid black;
            color: black;
            margin: 0px auto;
            /*padding: 15% 15% 0% 15%;*/
            float: left;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: lightpink;
            border: 1px solid black;
            border-radius: 15px;
            color: white;
            margin: 5px;
            z-index: 99;
            float: left;
            /*position: absolute;*/
        }
    </style>

    <!--<script src="script/02droppable.js"></script>-->
    <script>
        $(document).ready(function () {

            $(".box").draggable({
                revert: "invalid",
                stop: function () {
                    console.log("stopped");
                    $(this).draggable("option", "revert", "invalid");

                }
            });
            $(".boxMain").droppable({
                accept: ".box",
                drop: function (e, u) {
                    console.log("dropped");
                    if ($(this).hasClass("AcceptingBox")) {
                        u.draggable.appendTo($(this));
                        u.draggable.css({
                            "left": 0,
                            "top": 0
                        });
                    } else {
                        console.log("No");
                        u.draggable.draggable("option", "revert", true);
                    }
                }
            });


        });
    </script>
</head>
<body>

    <div style="height:200px;">
        <div id="sub1" class="box" style="background: red"></div>
        <div id="sub2" class="box" style="background: green"></div>
        <div id="sub3" class="box" style="background: blue"><p>Click</p></div>
        <div id="sub4" class="box" style="background: aqua"><p>Click</p></div>

    </div>
    <div id="main1" class="boxMain AcceptingBox">Accepting</div>
    <div id="main2" class="boxMain"></div>
    <!--<div id="main2" class="boxMain"></div>-->

</body>
</html>
...