Question

我有一个蓝色段落下的可拖动div，我想改变div上段落颜色的部分...如下图所示

这是我的代码：

<html>
<head>
<script>
    $(document).ready(function(){
        $("#div1").draggable();
    });
</script>
<style>
    #div1{
      position : absolute ;
      top : 10px ;
      left : 20px ;
      background : black ;
      width : 200px ;
      height : 200px ;
      cursor : move ;
    }
    #p1{
      position : absolute ;
      top : 100px ;
      left : 200px ;
      color : blue ;
    }
</style>
<head>
<body>
    <div id="div1"></div>
    <p id="p1">some text</p>
</body>
</html>

jsfiddle： https://jsfiddle.net/e7qvqot9/

Answer 1

也许这样做：

你需要有两个独立的paraghraps，第一个是蓝色，位于div内，第二个是蓝色，可以在div外面找到。

设置z顺序，因此白色文本位于顶部，然后是div，蓝色段落。 div还需要具有overflow：hidden属性。

这部分有点挑剔。将蓝色文本放在某处，例如，ypu当前有（100; 200）。然后，设置白色段落，使divs位置相对于左上角+ parapgraph相对于div的位置等于第一段的位置。所以，如果你的div为（10; 20），那么你需要将段落放在（90; 180）相对于div。

这适用于z-ordering工作的大多数浏览器。但是，您可以通过将元素放在rigjt中来绕过它

在这里，我做了一个例子

https://goo.gl/PafOMJ

这是目前最短的解决方案

Answer 2

这个怎么样：Fiddle

这完全符合您的要求，是一个纯JavaScript解决方案。虽然它涉及很多性能开销，但对于问题中提到的小文本应该没问题。

$(document).ready(function(){

  var boxLeftX;
  var boxLeftY;

    $("#div1").draggable({
    drag: function(){
            var offset = $(this).offset();
            boxLeftX = offset.left;
            boxLeftY = offset.top;
        }
  });

  var $source = $('#p1');
  var characters = $source.html();
  var sourceLength = characters.length;
  var replacement = "";

  for(var i = 0 ; i < sourceLength ; ++i){
    replacement += "<span class='interesting'>" + characters[i] + "</span>";
  }

  $source.html(replacement);

  var positionsStore = [];
  var positionOfPara = $('#p1').position();

  $('.interesting').each(function(index, element){
    var tempObj = {};
    var tempPos = $(element).position();
    tempObj.x = Number(tempPos.left) + Number(positionOfPara.left);
    tempObj.y = tempPos.top + positionOfPara.top;
    tempObj.ele = element;

    positionsStore.push(tempObj);

  });



  $('#div1').on("mouseup", function(evt){
    $.each(positionsStore, function(index, item){

    var boxX = $('#div1').position().left;
    var boxY = $('#div1').position().top;


        if(checkIfCoordIsInBox(item,boxX, boxY)){
        $(item.ele).removeClass("blue").addClass("orange");
      }else{
        $(item.ele).removeClass("orange").addClass("blue");
      }
    })

  });



});


function checkIfCoordIsInBox(charObj,x,y){
    console.log(charObj.x);
  console.log(charObj.y);
    if(((charObj.x - x) <= 200) && ((charObj.y - y) <= 200)){
     return true;
  }
  return false;
}

如何改变段落颜色的一部分

2 个答案: