Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
- <script>
- var overlaps = (function () {
- function getPositions( elem ) {
- var pos, width, height;
- pos = $( elem ).position();
- width = $( elem ).width();
- height = $( elem ).height();
- return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
- }
- function comparePositions( p1, p2 ) {
- var r1, r2;
- r1 = p1[0] < p2[0] ? p1 : p2;
- r2 = p1[0] < p2[0] ? p2 : p1;
- return r1[1] > r2[0] || r1[0] === r2[0];
- }
- return function ( a, b ) {
- var pos1 = getPositions( a ),
- pos2 = getPositions( b );
- return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
- };
- })();
- function set(){
- $(function () {
- var area = $( '#area' )[0],
- box = $( '#box0' )[0],
- html;
- html = $( area ).children().not( box ).map( function ( i ) {
- return document.getElementById('boh').innerHTML = 'Red box + Box ' + ( i + 1 ) + ' = ' + overlaps( box, this );
- }).get().join( '' );
- });
- }
- </script>
- <style>
- body {
- padding: 30px;
- color: #444;
- font-family: Arial, sans-serif;
- }
- h1 {
- font-size: 24px;
- margin-bottom: 20px;
- }
- #area {
- border: 2px solid gray;
- width: 500px;
- height: 400px;
- position: relative;
- }
- #area > div {
- background-color: rgba(122, 122, 122, 0.3);
- position: absolute;
- text-align: center;
- font-size: 50px;
- width: 60px;
- height: 60px;
- }
- #box0 {
- background-color: rgba(255, 0, 0, 0.5) !important;
- top: 150px;
- left: 150px;
- }
- #box1 {
- top: 260px;
- left: 50px;
- }
- #box2 {
- top: 110px;
- left: 160px;
- }
- #box3 {
- top: 200px;
- left: 200px;
- }
- #box4 {
- top: 50px;
- left: 400px;
- }
- p {
- margin: 5px 0;
- }
- * {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .disabled{
- pointer-events: none;
- }
- </style>
- <h1>Detect overlapping with JavaScript</h1>
- <div id="area">
- <div id="box0" onDragStart="return false"></div>
- <div id="box2" onDragStart="return false"></div>
- </div>
- <button id="down_btn" onclick="myMove4()">Down</button>
- <button id="up_btn" onclick="myMove()">Up</button>
- <div id="boh"></div>
- <script>
- var down = false;
- var pos = 0;
- window.addEventListener('mouseup', function(event){
- down = false;
- });
- window.addEventListener('mousedown', function(event){
- down = true;
- })
- function myMove4() {
- setTimeout(() => {
- var elem = document.getElementById("box2");
- var id = setInterval(frame, 10);
- function frame() {
- if (pos == 350 || !down) {
- clearInterval(id);
- } else {
- pos++;
- elem.style.top = pos + 'px';
- }
- }
- }, 500);
- }
- function myMove() {
- setTimeout(() => {
- var elem = document.getElementById("box2");
- var id = setInterval(frame, 10);
- function frame() {
- if (pos == 350 || !down) {
- clearInterval(id);
- } else {
- pos--;
- elem.style.top = pos + 'px';
- }
- }
- }, 500);
- }
- setInterval(() => {
- set();
- if(document.getElementById('boh').textContent == "Red box + Box 1 = true"){
- $("#down_btn").addClass("disabled");
- }
- else{
- $("#down_btn").removeClass("disabled");
- }
- }, 100);
- setInterval(() => {
- set();
- if(document.getElementById('boh').textContent == "Red box + Box 1 = true"){
- $("#down_btn").addClass("disabled");
- }
- else{
- $("#down_btn").removeClass("disabled");
- }
- }, 200);
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement