nadako/cursor_default_wood.cur

## cursor_default_wood.cur

      
    Raw
  

              cursor_default_wood.cur
            
          
            View raw
        
    
## cursor_drag_wood.cur

      
    Raw
  

              cursor_drag_wood.cur
            
          
            View raw
        
    
## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .normal-cursor {
            /* cursor: default; */
            cursor: url("./cursor_default_wood.cur"),default;
        }
        .drag-cursor {
            /* cursor: move; */
            cursor: url("./cursor_drag_wood.cur"),move;
        }
        body {
            width: 100%;
            height: 100%;
            background: black;
        }
    </style>
</head>
<body>

<div style="position: fixed; width: 300px; height: 300px; background-color: red" id="main">
    <div style="width: 100px; height: 100px; background-color: black" id="hover"></div>
</div>

<script>
    var main = document.getElementById("main");
    var hover = document.getElementById("hover");

    var next;

    function setDragCursor() {
        console.log('Changing cursor');
        main.classList.remove("normal-cursor");
        main.classList.add("drag-cursor");
        // next = setNormalCursor;
    }

    function setNormalCursor() {
        console.log("Changing cursor back");
        main.classList.add("normal-cursor");
        main.classList.remove("drag-cursor");
        // next = setDragCursor;
    }

    setNormalCursor();

    var down = false;
    var changed = false;
    var moving = false;
    var moved = false;
    main.onmousedown = () => { down = true; }
    main.onmousemove = () => {
        moved = true;
    }
    main.onmouseup = () => { down = false; if (moving) { moving = false; changed = true; } }

    // var hovering = false;
    // hover.onmouseenter = function() {
    //     hovering = true;
    // }
    // hover.onmouseleave = function() {
    //     hovering = false;
    // }


    function frame() {
        if (moved) {
            moved = false;
            if (down && !moving) {
                moving = true;
                changed = true;
            }
        }
        if (changed) {
            changed = false;
            console.log("CHANGED");
            if (moving)
                setDragCursor();
            else
                setNormalCursor();
        }
        requestAnimationFrame(frame);
    }
    frame();

    // setInterval(function() {
    //     next();
    // }, 3000);

</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	.normal-cursor {
	/* cursor: default; */
	cursor: url("./cursor_default_wood.cur"),default;
	}
	.drag-cursor {
	/* cursor: move; */
	cursor: url("./cursor_drag_wood.cur"),move;
	}
	body {
	width: 100%;
	height: 100%;
	background: black;
	}
	</style>
	</head>
	<body>

	<div style="position: fixed; width: 300px; height: 300px; background-color: red" id="main">
	<div style="width: 100px; height: 100px; background-color: black" id="hover"></div>
	</div>

	<script>
	var main = document.getElementById("main");
	var hover = document.getElementById("hover");

	var next;

	function setDragCursor() {
	console.log('Changing cursor');
	main.classList.remove("normal-cursor");
	main.classList.add("drag-cursor");
	// next = setNormalCursor;
	}

	function setNormalCursor() {
	console.log("Changing cursor back");
	main.classList.add("normal-cursor");
	main.classList.remove("drag-cursor");
	// next = setDragCursor;
	}

	setNormalCursor();

	var down = false;
	var changed = false;
	var moving = false;
	var moved = false;
	main.onmousedown = () => { down = true; }
	main.onmousemove = () => {
	moved = true;
	}
	main.onmouseup = () => { down = false; if (moving) { moving = false; changed = true; } }

	// var hovering = false;
	// hover.onmouseenter = function() {
	// hovering = true;
	// }
	// hover.onmouseleave = function() {
	// hovering = false;
	// }


	function frame() {
	if (moved) {
	moved = false;
	if (down && !moving) {
	moving = true;
	changed = true;
	}
	}
	if (changed) {
	changed = false;
	console.log("CHANGED");
	if (moving)
	setDragCursor();
	else
	setNormalCursor();
	}
	requestAnimationFrame(frame);
	}
	frame();

	// setInterval(function() {
	// next();
	// }, 3000);

	</script>

	</body>
	</html>