Question

我想拖动一个列表并将其放在占位符上。

只要文字触及占位符，它就应该更改背景颜色，以便指示可以在此处删除内容。

但是当有两个可放置的占位符彼此相邻时，我面临问题，然后当我将鼠标悬停在两个并放下它们时，它将被丢弃。它应该仅限于第一个。请打开以下链接以供参考，只需拖动一个更大的名称并将其放在{1} {2}上，然后它就会只放在一个上。

有可能吗？

CSS

.textarea {
  background: #00ff00;
  width: 100%
}

.dragitems {
  width: 20%;
  float: left;
  background: #f1f1f1;
}

.dropitems {
  width: 75%;
  float: left;
  background: #f1f1f1;
  margin-left: 20px;
  padding: 5px 5px 5px 5px;
}

.dragitems ul {
  list-style-type: none;
  padding-left: 5px;
  display: block;
}

#content {
  height: 400px;
  width: 650px;
}

HTML

<body>
  <form id="form1" runat="server">
    <div id="content">

      <div class="dragitems">
        <h3>
                <span>Available Fields</span></h3>
        <ul id="allfields" runat="server">
          <li id="node1">Name</li>
          <li class="ui-draggable" id="node2">Address</li>
          <li class="ui-draggable" id="node3">Phone</li>
          <li class="ui-draggable" id="node4">Sender Name</li>
          <li class="ui-draggable" id="node5">Sender Address</li>
          <li class="ui-draggable" id="node6">Sender Phone</li>
          <li class="ui-draggable" id="node7">Sender Email</li>
          <li class="ui-draggable" id="node8">Other1</li>
          <li class="ui-draggable" id="node9">Other2</li>
          <li class="ui-draggable" id="node10">Other3</li>
          <li class="ui-draggable" id="node11">Other4</li>
          <li class="ui-draggable" id="node12">Other5</li>
        </ul>
      </div>
      <div class="dropitems">
        <div id="TextArea1" cols="50" name="S1" rows="20"><span id="{1}">{1}</span><span id="{2}">{2}</span> thanks and regards<span id="{3}">{3}</span></div>
      </div>
    </div>
  </form>
</body>

JS

$(function() {
  $("#allfields li").draggable({
    appendTo: "body",
    helper: "clone",
    cursor: "copy",
    revert: "invalid"

  });
  initDroppable($("#TextArea1 span"));

  function initDroppable($elements) {
    $elements.droppable({
      tolerance: "touch",
      hoverClass: "textarea",
      accept: ":not(.ui-sortable-helper)",
      drop: function(event, ui) {
        var $this = $(this);

        var tempid = ui.draggable.text();
        var dropText;
        dropText = " {" + tempid + "} ";

        var div = document.getElementById("TextArea1");
        var spans = div.getElementsByTagName("span");


        $this[0].textContent = dropText;

      },
      tolerence: 'intersect'
    });
  }
});

Example Fiddle

Answer 1

您所看到的行为是设计的（即，它不是错误）。

获得所需功能的唯一方法是将容差从touch更改为pointer。执行此操作时，占位符将仅基于光标的位置突出显示，而不是您要拖动的元素的位置。

$(function() {
  $("#allfields li").draggable({
    appendTo: "body",
    helper: "clone",
    cursor: "copy",
    revert: "invalid"

  });
  initDroppable($("#TextArea1 span"));

  function initDroppable($elements) {
    $elements.droppable({
      tolerance: "pointer", // Property that was changed
      hoverClass: "textarea",
      accept: ":not(.ui-sortable-helper)",
      drop: function(event, ui) {
        var $this = $(this);

        var tempid = ui.draggable.text();
        var dropText;
        dropText = " {" + tempid + "} ";

        var div = document.getElementById("TextArea1");
        var spans = div.getElementsByTagName("span");


        $this[0].textContent = dropText;

      },
      tolerence: 'intersect'
    });
  }
});

这是a working fiddle。

拖拽jqueryui问题

1 个答案: