Хотел отредактировать везде, где могу, в контейнере div - PullRequest
Новая
       28

Хотел отредактировать везде, где могу, в контейнере div

0 голосов
/ 22 мая 2019

У меня есть список элементов, которые имеют функцию перетаскивания и в конце элемента списка, я добавил поле ввода, чтобы я мог добавить элемент в список.

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

Когда указатель курсора находится между item2 и item3, когда я нажимаю стрелку вправо, он должен перемещаться между item3 и item4, когда я нажимаю стрелку влево, курсор должен перемещаться между item 1 и item 2. 

<!DOCTYPE html>
<html>

<head>
  <title>Angularjs Drag and Drop Table Rows Example - ItSolutionStuff.com</title>
  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script src="http://cdn.jsdelivr.net/g/jquery@1,jquery.ui@1.10%28jquery.ui.core.min.js+jquery.ui.widget.min.js+jquery.ui.mouse.min.js+jquery.ui.sortable.min.js%29,angularjs@1.2,angular.ui-sortable"></script>
  <style>
    .drag-and-drop-container {
      -webkit-appearance: textfield;
      padding: 1px;
      background-color: #fff;
      border: 1px solid #a9a9a9;
      box-shadow: 1px 1px 1px 0 #d3d3d3 inset;
    }
    
    .drag-and-drop-container-focus {
      box-shadow: 0 0 3px 1px rgb(5, 139, 242, .6);
    }
    
    .drag-and-drop-ul {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      list-style-type: none;
      flex-wrap: wrap;
      margin-left: -35px;
      margin-bottom: 5px;
    }
    
    .drag-and-drop-ing {
      font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
      border: 2px solid #F4F4F4;
      border-radius: 14px;
      padding: 3px 4px 4px 4px;
      background: #F4F4F4;
      margin: 3px;  
      cursor: move;
    }
    
    .drag-and-drop-ing-name {
      color: rgb(60, 61, 54);
      font-size: 16px;
      padding-left: 3px;
    }
    
    .drag-and-drop-input {
      border: none;
      width: 145px;
      margin-left: 5px;
      margin-top: 3px;
      height: 26px;
      font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
      float: left;
    }
  </style>
</head>

<body>


  <div class="container">
    <div ng-app="myApp" ng-controller="mainController">
      <div class="global-ingredients-container">
        <div class="drag-and-drop-container" name="draganddropcontainer{{$index}}">
          <ul ui-sortable ng-model="items" class="drag-and-drop-ul">
            <li class="drag-and-drop-li" ng-repeat="item in items">
              <label class="drag-and-drop-ing">
                <span class="drag-and-drop-ing-name">{{ item }}</span>
            </label>
            </li>
            <input type="text" class="drag-and-drop-input" placeholder="Add an item" ng-model="itemName" ng-keydown="addItemIntoList($event, itemName, $index)" />
          </ul>
        </div>
      </div>
    </div>
  </div>


  <script type="text/javascript">
    var myApp = angular.module("myApp", ['ui.sortable']);


    myApp.controller("mainController", function($scope) {
      $scope.items = ["item1", "item2", "item3", "item4"];

      $scope.addItemIntoList = function(event, itemName, index) {
        if (event.keyCode == 13 && itemName.length > 2) {
          $scope.items.push(itemName);
        }
      }
    });
  </script>


</body>

</html>
...