Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <p class="drag"><span>Hello</span> <span>world,</span> <span>Attack</span> <span>on</span> <span>Titan</span> <span>season</span> <span>two!</span></p>
</body>
</html>
 
​
 
$(function(){
  
  var range = document.createRange();
  var selectionMode = false;
  
  $(document).on('mouseup', function() {
    selectionMode = false;
  })
  .on('mousedown', '.drag', function(e) {
    selectionMode = true;
  })
  .on('dragstart', '.drag span', function(e) {
    return false;
  });
  
  $('.drag').on('mousedown', 'span', function() {
    range.setStartBefore($(this)[0]);
    range.setEndAfter($(this)[0]);
    window.getSelection().addRange(range);
  })
  .on('mousemove', 'span', function() {
    if (!selectionMode) {
      return;
    }
    range.setEndAfter($(this)[0]);
    window.getSelection().addRange(range);
  })
  .on('mouseup', 'span', function() {
   setTimeout(function(){
     window.getSelection().addRange(range);
   }, 1);
  });  
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers