Pick selection event + selection movement - Jquery

Asked

Viewed 1,246 times

3

I would like to know how to catch the event with Jquery text selection + drag.

An example of what I am saying, is to select a text and with the left mouse button pressed, move the text sideways.

How do I get this event. Let’s say: if a certain text is selected in the div and I click on it and move. How would you find out that this event occurred? For it’s not just selecting, it’s clicking and moving the selection.

Analyzing, I found this example, where I am prevented from selecting the text of div with drag. I know it’s possible to do with css, but in my situation there are inputs, so maybe someone wants to select.

https://jqueryui.com/draggable/

How did they prevent the selection of text in the above example?

javascript jquery css

1 answer

2

Selecting text and clicking and dragging use similar events of the logo mouse depends a little on other factors (interface, html, etc.) to develop something 100% functional for you. But below is a possibility. With this example you can adapt the same to your needs.

https://jsfiddle.net/dbeff/ktoaL0a7/1/

document.onselectionchange = function() {
  var selObj = window.getSelection();
  var selRange = selObj.toString();
  console.log(selRange);
  
  document.querySelector('.selection').innerHTML = selRange;

};

$(".selection").draggable({
  cursor: "crosshair"
});
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="element">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde blanditiis, accusamus cum nihil laboriosam magnam animi sed provident nisi a debitis numquam sequi sit rerum dignissimos? Eveniet tempore consequuntur, aperiam.
</div>
<br>
<div class="selection">
  
</div>

I hope I helped :D

  • Daniel, that’s almost what I want to do. But it’s not moving what was selected and placed in another div. It’s moving what is selected. Let’s say, I select the text, it gets the "blue" background. So if I click it and move, I can put it in "inputs". What I would like to do is detect the click and the event moves in the selected text. Is there anything to detect that an event occurred in a selected text? or will I have to add some tag before and after the selected text and remove it when the selection does not exist? ATT

  • You can do this, but visually it won’t look good. A visually friendlier solution is to make an element appear on top of the place where you selected the text with the selected text snippet and the user uses this element to drag. Basically it is to take this example that I passed you above but positioning/showing the element with the selected text on top of the selected text.

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.