Drag and Drop, клонируемый и удаляемый - PullRequest
Новая
       3

Drag and Drop, клонируемый и удаляемый

0 голосов
/ 30 апреля 2018

Я только начал несколько дней назад работать с пользовательским интерфейсом JQuery, чтобы разрешить перетаскивание и сортировку на моей домашней странице. В коде, показанном ниже, я хотел добавить «+» и «-», чтобы исправить уравнение «1_2_3 = 6», поэтому «+» нужно было дважды убрать, чтобы уравнение было правильным.

На данный момент он работает почти идеально. Я могу добавить столько «+» и «-», сколько захочу, я могу отсортировать их в уравнение. Единственная проблема в том, что я не могу удалить ни «+», ни «-».

Можете ли вы дать мне какой-нибудь намек, как можно удалить знаки, перемещая их из сортируемого окна?

Спасибо за вашу помощь! 

<html>
<head>

  <style>


  #draggable { list-style-type: none; margin: 0; padding: 0; }
  #draggable li { display: inline-block; margin: 1%; padding: 1%; font-size: 10vw; text-align:center; min-width:20px; border-style: solid; border-width: medium; border-color:black; background-color:grey;}

  #sortable { float:left; list-style-type: none; width:100%; }
  #sortable li { display: inline-block; margin: 0; padding: 0; font-size: 10vw; text-align:center; min-width:20px;}


  </style>
  <script src="jquery-1.12.4.js"></script>
  <script src="jquery-ui.min.js"></script>
  <script>
  $( function() {

    $( ".clone").draggable({
        cursor:"move",
        revert: "invalid",
        connectToSortable: '#sortable',
        helper: 'clone'
    });

    $( "#sortable").sortable({
      connectWith: "ul",
      cancel: ".ui-state-disabled",
    });


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


<ul id="draggable">
  <li class="clone">+</li>
  <li class="clone">-</li>
</ul>


<ul id="sortable">
  <li class="ui-state-disabled">1</li>
  <li class="ui-state-disabled">2</li>
  <li class="ui-state-disabled">3=6</li>
</ul>



</body>
</html>

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

Расширение моего комментария. Ваш код может выглядеть примерно так. 

$(function() {
  $(".clone").draggable({
    cursor: "move",
    revert: "invalid",
    connectToSortable: '#sortable',
    helper: 'clone'
  });
  $("#sortable").sortable({
    connectWith: "ul",
    cancel: ".ui-state-disabled",
  });
  $(".trash").droppable({
    accept: "#sortable > li",
    classes: {
      "ui-droppable-hover": "ui-state-highlight"
    },
    drop: function(event, ui) {
      deleteItem(ui.draggable);
    }
  });

  function deleteItem($o) {
    $o.fadeOut().remove();
  }
});
#draggable {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#draggable li {
  display: inline-block;
  margin: 1%;
  padding: 1%;
  font-size: 10vw;
  text-align: center;
  min-width: 20px;
  border-style: solid;
  border-width: medium;
  border-color: black;
  background-color: grey;
}

#sortable {
  list-style-type: none;
  width: 100%;
}

#sortable li {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: 10vw;
  text-align: center;
  min-width: 20px;
}

.trash {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  border-radius: 6px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div class="drag-items" style="display: block;">
  <ul id="draggable">
    <li class="clone">+</li>
    <li class="clone">-</li>
  </ul>
</div>
<div class="problem" style="display: block;">
  <ul id="sortable">
    <li class="ui-state-disabled">1</li>
    <li class="ui-state-disabled">2</li>
    <li class="ui-state-disabled">3=6</li>
  </ul>
</div>
<div class="trash">
  <span class="ui-icon ui-icon-trash"></span>
</div>

В этом коде добавьте небольшой раздел для элементов, которые нужно перетаскивать, и когда они удаляются, они удаляются. Также имеет визуальную обратную связь.

0 голосов
/ 30 апреля 2018

Вы можете создать div, когда компоненты пользовательского интерфейса помещены в div, вы можете удалить удаленный компонент.

Пример кода. 

//HTML

<div class="removeDiv">
  <p>Drop to remove</p>
</div>

//Style
.removeDiv{
    width:100px;
    height:100px;
    background-color:red;
    margin-top:150px;
  }

//Script
$('.removeDiv').droppable({
    over: function(event, ui) {
        ui.draggable.remove();
    }
});

Это должно сделать вашу работу. Вот скрипка для приведенного выше кода. JS Fiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...