Как я могу удалить редактируемый div, нажав на него и затем нажав клавишу Delete на клавиатуре с помощью Jquery? - PullRequest
Новая
       1

Как я могу удалить редактируемый div, нажав на него и затем нажав клавишу Delete на клавиатуре с помощью Jquery?

0 голосов
/ 30 декабря 2018

У меня есть div с атрибутом contenteditable = true.Я могу активировать редактирование содержимого div, дважды щелкнув div, потому что мой div перетаскивается, поэтому я использую событие клика dooble, чтобы активировать выпуск div.Дело в том, что я хочу удалить полный div, щелкнув по нему, а затем нажав клавишу Delete на клавиатуре.Как я могу это сделать?Как сделать так, чтобы, когда я что-то записывал в div и нажимал клавишу удаления, не удалялся весь div?Я хочу удалить div только тогда, когда div div не активирован, просто нажмите на div, а затем нажмите клавишу удаления и вуаля, он удаляется.

Это мой HTML-код: 

$(document).ready(function() {

  $('.draggable').draggable({
    containment: "parent"
  });

  $(".draggable").resizable();

  $('#MyFirstDiv').click(function() {
    //HERE I WANT TO PUT THE CODE TO DELETE THE DIV.
  });

  $("#myContainer").on("dblclick", "#MyFirstDiv", function(e) {
    e.preventDefault();
    $(".draggable").draggable('disable');

    this.querySelector(":scope > :first-child").focus();

  });

  $("#myContainer").on("blur", "#MyFirstDiv", function(e) {
    e.preventDefault();
    $(".draggable").draggable('enable');
  });

});
#myContainer {
  border: 1px solid black;
  height: 400px;
  width: 100%;
}

#DraggableDiv {
  border: 1px solid blue;
}
<!DOCTYPE html>
<html>

<head>
  <title>My Delete Div</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>

  <div id="myContainer">
    <div id="MyFirstDiv">
      <div class="draggable" contenteditable="true" id="DraggableDiv">
        THIS IS MY TEXT INSIDE THE DIV
      </div>
    </div>
  </div>

</body>

</html>

Ответы [ 4 ]

0 голосов
/ 30 декабря 2018

Тест

  • Нажмите на текст для выбора.
  • Нажмите D для удаления. [к сожалению, ключ удаления не работал при переполнении стека.Просто измените код ключа в операторе if, чтобы изменить ключ с D на DELETE]

Объяснение

Существуют две функции, которые помогают решить эту проблему. Выбрать : Выбранный div нажал. EventListener: Прослушивает нажатие клавиши и удаляет выбранный div.

Функция выбора

  1. Выбранная глобальная переменная сохраняет информацию о выбранном элементе div.
  2. В функции выбора мы выбираем имя id элемента, по которому щелкают, используя currentTarget.id из объекта события 'e'.
  3. Если операторы внутри функции выбора выбирают и отменяют выбор div.

EventListener

  1. Использует объект события из приемника нажатия клавиш для извлечения нажатой клавиши.
  2. e.keyCode дает ключ. e.which - запасной вариант. [то есть для пользователей]
  3. Если их keyCode равен 100 (клавиша D), то используйте выбранную переменную, чтобы получить выбранный div и изменить его отображение css на 'none'.

Кроме того, есть оператор else, в который вы можете добавить js, когда ничего не выбрано и клавиша нажата.Также css для выбранного класса предназначен для обратной связи при выборе div.

Вот фрагмент кода: 

let selected;

const select = e => {
    //If already selected, this will deselect the div
    if(selected == e.currentTarget.id) {
      document.getElementById(selected).classList.remove('selected'); //some CSS
      selected = null;
    } else {
       //select this div
      selected = e.currentTarget.id;
      document.getElementById(selected).classList.add('selected'); //some CSS
    }
}

window.addEventListener('keypress', e => {
  //Get key pressed
  let key = e.keyCode || e.which;
  if(selected != undefined) {
      if(key == 100) {//If D is pressed
        let target = document.getElementById(selected); //get the div
        target.style.display = 'none'; //hide div
        console.log('deleted: ' + selected);
      }
  } else {
    //Runs if nothing is selected. Do as you please here.
  }
})
.selected {
  background: black;
  color: white;
}

#DraggableDiv {
  user-select: none;
  cursor: pointer;
  font-family: sans-serif;
  width: 400px;
  text-align: center;
  padding: 10px 5px;
}
<!DOCTYPE html>
<html>

<head>
  <title>My Delete Div</title>

</head>

<body>

  <div id="myContainer">
    <div id="MyFirstDiv">
      <div id="DraggableDiv" onclick="select(event)">
        Click me and press D
      </div>
    </div>
  </div>

</body>

</html>
0 голосов
/ 30 декабря 2018

Сначала вы можете просто создать переменную: divClicked, я сохраняю состояние нажатия div 

var divClicked = false;

Затем в вашем прослушивателе событий обновите divClicked (это будет кнопка переключения)): 

$("#MyFirstDiv").click(function(e) {
    e.preventDefault();
    divClicked = !divClicked;
}

Наконец, добавьте слушатель события удаления ключа следующим образом: 

$("#MyFirstDiv").keydown(function(e) {
    e.preventDefault();
    if (e.keyCode == 46) {
        if (divClicked) {
            $(this).remove();
        } else {
            alert("Click the div first then press Delete to remove it");
        }
    }
})

Полный код: 

var divClicked = false;

$("#MyFirstDiv").click(function(e) {
    e.preventDefault();
    divClicked = !divClicked;
}

$("#MyFirstDiv").keydown(function(e) {
    e.preventDefault();
    if (e.keyCode == 46) {
        if (divClicked) {
            $(this).remove();
        } else {
            alert("Click the div first then press Delete to remove it");
        }
    }
})
0 голосов
/ 30 декабря 2018

Не рекомендуется использовать Удалить во время редактирования содержимого.Вы захотите убедиться, что пользователь может щелкнуть сам элемент <div> без редактирования содержимого.

Поскольку <div> перетаскивается, я бы посоветовал использовать дескриптор, начиная с события click и * 1008.* события могут получить захват для редактирования контента, а не для вашего сценария. 

$(function() {
  function disDrag(part) {
    var drag = part.closest(".draggable");
    drag.draggable("disable");
    $(".drag-content", drag).removeAttr("contenteditable").blur();
    part.toggleClass("ui-icon-locked ui-icon-unlocked");
  }

  function enDrag(part) {
    var drag = part.closest(".draggable");
    drag.draggable("enable");
    $(".drag-content", drag).attr("contenteditable", true).focus();
    part.toggleClass("ui-icon-locked ui-icon-unlocked");
  }

  function delDrag(part) {
    var drag = part.closest(".draggable");
    var res = confirm("Are you sure you wish to delete this item?");
    if (res) {
      drag.remove();
    }
  }

  $('.draggable')
    .draggable({
      containment: "parent",
      handle: ".ui-drag-handle",
      start: function() {
        $(".ui-drag-handle", this).data("selectable", false);
      },
      stop: function() {
        $(".ui-drag-handle", this).data("selectable", true);
      }
    })
    .resizable();

  $(".ui-drag-handle")
    .data("selectable", true)
    .click(function(e) {
      var drag = $(this).closest(".draggable");
      if ($(this).data("selectable")) {
        drag.toggleClass("drag-selected");
      }
    });

  $(".btn").click(function(e) {
    switch (true) {
      case $(this).hasClass("ui-icon-unlocked"):
        disDrag($(this));
        break;
      case $(this).hasClass("ui-icon-locked"):
        enDrag($(this));
        break;
      case $(this).hasClass("ui-icon-close"):
        delDrag($(this));
        break;
    }
  });

  $(document).keyup(function(e) {
    if (e.which == 46 && $(".drag-selected").length) {
      delDrag($(".drag-selected"));
    }
  });
});
#myContainer {
  border: 1px solid black;
  height: 400px;
  width: 100%;
}

.draggable {
  border: 1px solid blue;
}

.draggable.drag-selected {
  border: 1px solid #0f0;
}

.center {
  margin-left: 50%;
}

.right {
  float: right;
}

.ui-icon.btn {
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-top: 0px;
  margin-left: 1px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="myContainer">
  <div class="draggable ui-widget" id="DraggableDiv">
    <div class="ui-widget-header">
      <span class="right ui-icon ui-icon-close btn" title="Delete the item."></span>
      <span class="right ui-icon ui-icon-unlocked btn" title="Lock and disable Drag"></span>
      <div class="ui-drag-handle" style="width: calc(100% - 42px);">
        <span class="center ui-icon ui-icon-grip-dotted-horizontal"></span>
      </div>
    </div>
    <div class="drag-content" contenteditable="true">
      THIS IS MY TEXT INSIDE THE DIV
    </div>
  </div>
</div>

Вы можете видеть, что это перетаскиваемый, изменяемый размер и редактируемый.Пользователь может отключить перетаскивание, нажав на значок замка.Если выбрать элемент div и нажать «Удалить» (или код клавиши 46), или они щелкают значок закрытия, им будет предложено подтвердить, что они хотят удалить элемент.Как только они подтвердят, что они хотят Да, элемент будет удален.

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

Что касается структуры, вы можетене сможет сойти с рук с такими простыми структурами HTML при работе с более сложными взаимодействиями пользовательского интерфейса.Этот элемент <div> имел всевозможные взаимодействия, связанные с событием click.Пользователь нажимает, чтобы редактировать, выбирать, перетаскивать ... Лучше сделать более конкретные цели для некоторых из этих событий, чтобы вы могли лучше составлять сценарии своих событий.

Вы можете сэкономить много времени, используяВиджет диалога: https://jqueryui.com/dialog/

Надеюсь, это поможет.

0 голосов
/ 30 декабря 2018

Самый простой способ зафиксировать нажатие на клавишу удаления.

$('#MyFirstDiv').click(function(e){
   e.preventDefault(); 
});
$('#MyFirstDiv').keydown(function(e){
    e.preventDefault();
    if(e.keyCode == 46) {
        this.remove();
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...