Jquery UI 放置事件未触发

问题描述 投票：0回答：1

我正在尝试在应用程序中进行拖放操作。 

drag
部分工作正常，但 
drop
不工作。由于某种原因，
drop
没有被触发/接受。

这是我正在使用的拖放配置。

$(document).ready(function () {
    $('._item').draggable({
        helper: 'clone',
        cursor: 'move',  
        start: function (event, ui) {
            console.log('Dragging started');
            $(ui.helper).css('z-index', 1000);
        }
    });

    $('._page').droppable({
        accept: '._item',
        drop: function (event, ui) {
            console.log('Dropped on page'); 

            var $clone = $(ui.helper).clone().removeClass('ui-draggable-dragging');

            $clone.css({
                position: 'absolute',
                left: ui.offset.left - $(this).offset().left,
                top: ui.offset.top - $(this).offset().top
            }).appendTo(this);

            console.log('Clone positioned and appended');
        }
    });
});

自从 

drop
没有被触发以来，有人不能告诉我我做错了什么吗？

我已经提取了渲染的代码并将其添加到代码片段中，以便您可以看到问题。

问题演示

$("._menu_item").click(function() {
  if (!$(this).hasClass("is-active")) {
    $("._menu_item.is-active").removeClass("is-active");
    $(this).addClass("is-active");

    var _index = +$(this).attr("data-index");
    switch (_index) {
      case 0:
        ShowAndHideElem([$(".Toolsbar ._wrench"), $(".Toolsbar ._brush"), $(".Toolsbar ._code")], [$(".Toolsbar ._bricks")]);
        break;
      case 1:
        ShowAndHideElem([$(".Toolsbar ._bricks"), $(".Toolsbar ._brush"), $(".Toolsbar ._code")], [$(".Toolsbar ._wrench")]);
        break;
      case 2:
        ShowAndHideElem([$(".Toolsbar ._bricks"), $(".Toolsbar ._wrench"), $(".Toolsbar ._code")], [$(".Toolsbar ._brush")]);
        break;
      case 3:
        ShowAndHideElem([$(".Toolsbar ._bricks"), $(".Toolsbar ._wrench"), $(".Toolsbar ._brush")], [$(".Toolsbar ._code")]);
        break;
      default:
        // code block
    }
  }
})

$(document).ready(function() {
  ShowAndHideElem([$(".Toolsbar ._wrench"), $(".Toolsbar ._brush"), $(".Toolsbar ._code")], [$(".Toolsbar ._bricks")]);

})

$(document).ready(function() {
  $('._item').draggable({
    helper: 'clone', // Clone the element while dragging
    cursor: 'move', // Change the cursor to move while dragging
    // containment: 'document', // Allow dragging throughout the document
    start: function(event, ui) {
      // Adjust the z-index of the helper element
      console.log('Dragging started');
      $(ui.helper).css('z-index', 1000);
    }
  });

  // Make the ._page element a drop target
  $('._page').droppable({
    accept: '._item',
    drop: function(event, ui) {
      console.log('Dropped on page'); // Log to ensure drop is triggered

      // Create a new clone of the dragged item to drop into the _page
      var $clone = $(ui.helper).clone().removeClass('ui-draggable-dragging');

      // Adjust the position of the clone relative to the _page
      $clone.css({
        position: 'absolute',
        left: ui.offset.left - $(this).offset().left,
        top: ui.offset.top - $(this).offset().top
      }).appendTo(this);

      console.log('Clone positioned and appended');
    }
  });
});




function ShowAndHideElem(elementsToHide, elementsToShow, fallback = null, showSpinner = false) {
  $(elementsToHide).each(function() {
    $(this).hide();
  });

  if (showSpinner) {
    $("body").append('<div id="spinner" class="spinner">Loading...</div>');
  }


  $.each(elementsToShow, function() {
    $(this).show();
  });

  if (showSpinner) {
    $("#spinner").remove();
  }

  if (typeof fallback === 'function') {
    fallback();
  }
}
.container {
  max-width: unset !important;
  padding: 0 !important;
  display: inline-block;
  height: calc(100% - 75px);
}

.container>[role=main] {
  display: inline-block;
  height: 100%;
  width: 100%;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

.footer {
  background-color: #fff;
}

._snapPdfBuilder {
  position: relative;
  display: inline-block;
  height: calc(100% - 42px);
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}

._snapPdfBuilder .LeftBar {
  height: 100%;
  width: 65px;
  border-right: 1px solid rgb(235, 235, 235);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 0px;
  z-index: 2;
  padding: 5px;
  float: left;
}

._snapPdfBuilder .LeftBar ._menu_item {
  padding: 9px;
  cursor: pointer;
  width: 54px;
  height: 54px;
  border-radius: 5px;
  transition: background-color 0.1s;
  border: 1px solid transparent;
  gap: 3px;
  color: rgb(33, 33, 33);
  background-color: transparent;
  text-align: center;
  vertical-align: middle;
  line-height: 32px;
  font-size: 22px;
  margin-bottom: 5px;
}

._snapPdfBuilder .LeftBar ._menu_item:not(.disabled):hover,
._snapPdfBuilder .LeftBar ._menu_item.is-active {
  background: rgb(234, 237, 240);
  color: rgb(33, 33, 33);
  text-align: center;
}

._snapPdfBuilder .Toolsbar {
  height: 100%;
  width: 400px;
  border-right: 1px solid rgb(235, 235, 235);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 0px;
  z-index: 2;
  padding: 5px;
  float: left;
}

._snapPdfBuilder .Toolsbar>div {
  display: none;
}

._snapPdfBuilder .Toolsbar .show {
  display: block;
}

._snapPdfBuilder .Toolsbar .hide {
  display: none;
}

._snapPdfBuilder .Toolsbar ._bricks {
  height: 100%;
  padding: 5px 10px;
  background-color: rgb(249, 249, 251);
  overflow-y: scroll;
  overflow-x: hidden;
}

._snapPdfBuilder .Toolsbar .SearchBox input {
  cursor: text;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(235, 235, 235);
  position: relative;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  padding: 0.625em;
  border-radius: 0.35em;
  transition: background-color, 0.1s;
}

._snapPdfBuilder .Toolsbar .accordion details {
  padding: 15px 0px 0px;
}

._snapPdfBuilder .Toolsbar .accordion details summary {
  text-transform: uppercase;
  font-weight: 600;
}

._snapPdfBuilder .Toolsbar .accordion details summary span {
  padding-left: 10px;
}

._snapPdfBuilder .Toolsbar .accordion details summary::marker {
  font-family: "FontAwesome";
  content: "\f077";
}

._snapPdfBuilder .Toolsbar .accordion details[open] summary::marker {
  content: "\f078";
}

._snapPdfBuilder .Toolsbar .accordion details ._item {
  height: 56px;
  width: 100%;
  max-width: 350px;
  padding: 12px 10px;
  line-height: 28px;
  margin-top: 10px;
  cursor: grab;
  transition: opacity 0.2s ease-out;
  z-index: 10;
  /* Default z-index */
  position: relative;
  /* Default position */
}

._snapPdfBuilder .Toolsbar .accordion details ._item ._icon {
  float: left;
  padding-right: 10px;
  font-size: 20px;
}

._snapPdfBuilder .Toolsbar .accordion details ._item ._header {
  float: left;
  font-weight: 600;
  font-size: 20px;
}

._snapPdfBuilder .Toolsbar .accordion details ._item:hover,
._snapPdfBuilder .Toolsbar .accordion details ._item.drag-hover {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(235, 235, 235);
}

._snapPdfBuilder .PageBar {
  height: 100%;
  width: calc(100vw - 500px);
  border-right: 1px solid rgb(235, 235, 235);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 0px;
  z-index: 2;
  padding: 5px;
  float: left;
  overflow-y: scroll;
}

._snapPdfBuilder .PageBar .page_container {
  margin: 0 auto;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(235, 235, 235);
  width: 210mm;
  /* A4 width */
  min-height: 297mm;
  /* A4 height */
}

._snapPdfBuilder ::-webkit-scrollbar {
  width: 10px;
}

._snapPdfBuilder ::-webkit-scrollbar-track {
  background: rgb(249, 249, 251);
}

._snapPdfBuilder ::-webkit-scrollbar-thumb {
  background: #888;
}

._snapPdfBuilder ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.dragging {
  position: absolute !important;
  /* Override with absolute positioning */
  z-index: 1000 !important;
  /* High z-index to appear above other elements */
  pointer-events: none;
  /* Ignore pointer events to prevent blocking drops */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/js/all.min.js" integrity="sha512-6sSYJqDreZRZGkJ3b+YfdhB3MzmuP9R7X1QZ6g5aIXhRvR1Y/N/P47jmnkENm7YL3oqsmI6AK+V6AD99uWDnIw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.0/jquery-ui.min.js" integrity="sha512-MlEyuwT6VkRXExjj8CdBKNgd+e2H+aYZOCUaCrt9KRk6MlZDOs91V1yK22rwm8aCIsb5Ec1euL8f0g58RKT/Pg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.0/themes/base/jquery-ui.min.css" integrity="sha512-F8mgNaoH6SSws+tuDTveIu+hx6JkVcuLqTQ/S/KJaHJjGc8eUxIrBawMnasq2FDlfo7FYsD8buQXVwD+0upbcA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>



<div class="_snapPdfBuilder">
  <div class="LeftBar">
    <div class="_menu_item is-active" data-index="0">
      <span class="fa fa-trowel-bricks"></span>
    </div>
    <div class="_menu_item" data-index="1">
      <span class="fa fa-wrench"></span>
    </div>
    <div class="_menu_item" data-index="2">
      <span class="fa fa-brush"></span>
    </div>
    <div class="_menu_item" data-index="3">
      <span class="fa fa-code"></span>
    </div>
  </div>
  <div class="Toolsbar">
    <div class="_bricks">
      <div class="SearchBox">
        <input placeholder="Search block" />
      </div>
      <div class="accordion">
        <details open>
          <summary><span>Text</span></summary>
          <div>
            <div class="_item">
              <div class="_icon">
                <span class="fa fa-heading"></span>
              </div>
              <div class="_header">
                Headline
              </div>
            </div>
            <div class="_item">
              <div class="_icon">
                <span class="fa fa-grip-lines"></span>
              </div>
              <div class="_header">
                Text
              </div>
            </div>
          </div>
        </details>
        <details open>
          <summary><span>Layout</span></summary>
          <div>
            <div class="_item">
              <div class="_icon">
                <span class="far fa-object-group"></span>
              </div>
              <div class="_header">
                Container
              </div>
            </div>
            <div class="_item">
              <div class="_icon">
                <span class="fa fa-slash"></span>
              </div>
              <div class="_header">
                Separator
              </div>
            </div>
            <div class="_item">
              <div class="_icon">
                <span class="far fa-file"></span>
              </div>
              <div class="_header">
                Page
              </div>
            </div>
          </div>
        </details>
        <details>
          <summary><span>Inputs</span></summary>
          <div>
            <div class="_item">
              <div class="_icon">
                <span class="fa fa-heading"></span>
              </div>
              <div class="_header">
                Headline
              </div>
            </div>
            <div class="_item">
              <div class="_icon">
                <span class="fa fa-grip-lines"></span>
              </div>
              <div class="_header">
                Text
              </div>
            </div>
          </div>
        </details>
      </div>
    </div>
    <div class="_wrench">2</div>
    <div class="_brush">3</div>
    <div class="_code">4</div>
  </div>
  <div class="PageBar">
    <div class="page_container">
      <div class="_page"></div>
    </div>
  </div>
</div>

jquery jquery-ui drag-and-drop jquery-ui-droppable
1个回答
0
投票

您的 

._page
元素没有高度，因此将任何东西放入其中都将非常困难。

开始拖动时在主体上设置一个类，并在停止时将其删除：

$('._item').draggable({
    helper: 'clone',
    cursor: 'move',  
    start: function (event, ui) {
        console.log('Dragging started');
        $(ui.helper).css('z-index', 1000);
        $('body').addClass('dragging-started');
    },
    stop: function (event, ui) {
        $('body').removeClass('dragging-started');
    }
});

使用CSS在元素上设置

min-height

body.dragging-started ._page {
    min-height: 100px;
    background: #CCC; /* This is just to show the dropzone */
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.