CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Aman Rawat
Aman Rawat

Reputation: 45

Drag Drop jqueryui issue

I want to drag a list and drop it over placeholder.

As soon as text touches a placeholder it should change the background color so as to indicate that the content can be dropped here.

But I am facing issue when there are two droppable placeholder adjacent to each other then when I hover over both and drop it, then it is dropped over both. It should restrict to first one only. Please open below link for reference just drag a larger name and place it over {1}{2} then it should drop on one only.

Is it possible?

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

Upvotes: 1

Views: 53

Answers (1)

James Hill
James Hill

Reputation: 61793

The behavior that you're seeing is by design (i.e., it's not a bug).

The only way to get the functionality that you want is to change your tolerance from touch to pointer. When you do that, the placeholder will only be highlighted based on the position of the cursor, not the position of the element that you're dragging.

$(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'
    });
  }
});

Here's a working fiddle.

Upvotes: 1

Related Questions