Question

下面是我的Jquery代码。

$( document ).ready(function() {
   var listItem = $('#list_id');

    var html = $.trim(listItem.html());

    var count = 0;
    var match = '&nbsp;';

    while (html.substr(0, match.length) === match) {
       count++;
       html = html.substr(count * match.length, (count * match.length) + match.length);
    }

    alert(count);
});

我想在段落中找到空格，然后在段落中为该特定空格添加一个类。

最初我需要找到空格。我已经尝试过上面的代码，但其返回计数为零。这意味着没有找到任何空格。

我将使用addClass将类droppable添加到textarea内的段落。

<textarea id="list_id">"Kohl" is considered not only as a cosmetic; the importance of  kohl around eyes dates back to 4000 B.C. when Egyptians used a paste of antimony sulphide and lead sulphide. 
They that it kept the eyes safe from infections, sun rays, and evil spirits. Kohl literally means "something that brightens". So, it was applied around the eyes to draw attention and make them look .</textarea>

从截图中。我想将选择1按钮拖放到textarea中textarea.for按钮中的空格应该是可拖动的，而textarea中的空格应该被视为droppable。从此我想在第I段中定义wherevr空格应该声明为droppable所以我可以拖放。这是我尝试这种情况。这是否可能。

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Droppable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
    $( ".droppable" ).droppable({
      drop: function( event, ui ) {
        /*$( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );*/
         $( "#draggable" ).draggable( 'disable' );
      }
    });
  } );
  $( document ).ready(function() {

var listItem = $('#list_id').val().replace(/\ /g, "<div class='droppable'> </div>");

   console.log(listItem);
});
 </script>
</head>
<body>

<div id="draggable">
  <p>D</p>
</div>
<textarea id="list_id" class="droppable">"Kohl" is considered not only as a cosmetic; 
the importance of  kohl around eyes dates back to 4000 B.C. when Egyptians used a paste of antimony sulphide and lead sulphide. 
They that it kept the eyes safe from infections, sun rays, and evil spirits. Kohl literally means "something that brightens". So, it was applied around the eyes to draw attention and make them look .</textarea>
</body>
</html>

Answer 1

尝试这样的事情只是为检查空白区域设置条件。

document.getElementById('drag').addEventListener('dragstart', function (e) {
  e.dataTransfer.setData("text", '{' + this.id + '}');
});

<p id="drag" href="#" draggable="true">hello</a>

<textarea id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</textarea>

Answer 2

$( document ).ready(function() {
   var listItem = $('#list_id').val().replace(/\ /g, "<span class='space'> </span>");

   console.log(listItem);
});

这样可行，但你应该尝试别的东西而不是textarea，你可以尝试一下contentEditable div ......

修改

我不知道这是否是你想要实现的目标，但这是一个基本概念的工作小提琴，这是最初的想法......

https://jsfiddle.net/caiokawasaki/d07pvbe3/

Answer 3

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>jQuery UI Droppable - Default functionality</title> 
<link rel="stylesheet" href="assets/css/jquery-ui.css"> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<style> 
.draggable{
  display: inline-block;
}

#list_id .space{
    background-color: transparent;
    border:1px dashed #ccc;
    padding: 3px 40px;
  }
</style> 
<script src="assets/js/jquery-1.12.4.js"></script> 
 <script src="assets/js/jquery-ui.js"></script>
<script> 
$( document ).ready(function() {
  $('.draggable').draggable({
        revert: 'invalid',
        stop: function(){
            $(this).draggable('option','revert','invalid');
        }
    });

    $('.draggable').droppable({
       greedy: true,
        tolerance: 'touch',
       drop: function(event,ui){
           ui.draggable.draggable('option','revert',true);
       }
    });
  var listItem = $('#list_id');

  function replaceSpaces(){
    return listItem.text().replace(/\ /g, "<span class='space'> </span>")
  }

  $('#list_id').on("blur", function(){
    $("#list_id").html(replaceSpaces());
    $("#list_id_input").val(replaceSpaces());



    $(".space").droppable({
     accept: ".draggable",
     drop: function(event, ui) {        
       console.log(event.target);
       $(this).append($(ui.draggable));
       $(ui.draggable).removeAttr("style");
     },
    });
  });
});
</script> 
</head> 
<body> 
<div class="draggable">Choice1</div><br/><br/>
<div id="list_id" contentEditable>"Kohl" is considered not only as a cosmetic; the importance of  kohl around eyes dates back to 4000 B.C. when Egyptians used a paste of antimony sulphide and lead sulphide. 
They that it kept the eyes safe from infections, sun rays, and evil spirits. Kohl literally means "something that brightens". So, it was applied around the eyes to draw attention and make them look .</div>
<input type="hidden" id="list_id_input">
</body> 
</html>

使用Jquery将类添加到段落中的空格

3 个答案:

修改