Menu
i have a draggable div that is under a blue paragraph , i wanna change the part of paragraph color that is on div ... like the image below
and here is my codes:
<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/
314
Maybe do this:
You need to have 2 separate paraghraps, the first one is blue and is located inside the div, the second one is blue, and can be found outside the div.
Set the z-order, so the white text is on the top, then comes the div, and the the blue paragraph. The div also needs to have the overflow: hidden attribute.
This part is a bit finicky. Position the blue text somewhere, for example, ypu currently have ot at (100; 200). Then, set the white paragraph, so the divs position relatove to the top-left corner + the parapgraph's position relative to the div equals to the first paragraph's position. So, if you have the div at (10; 20), then you need to have the paragraph at (90; 180) relative to the div.
This works in most browsers, where z-ordering works. However, you can bypass that, by putting the elements in the rigjt place
Here, I made an example
https://goo.gl/PafOMJ
This is currently the shortest solution
186
What about this: Fiddle
This works exactly as you want, and is a pure JavaScript solution. Although it involves a lot of performance overhead, it should be okay for the small text mentioned in the question.
$(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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
