Put "hand" in the iframe [duplicate]

Navigation
1

Good morning. I'm opening .png files with iframe and would like to know if it's possible to put that "little hand" that google maps uses to drag the image inside the iframe. The usefulness of this "little hand" is to drag the image to the side, as is google maps .. (Note: Not only to change the mouse pointer to a "little hand" but to have the same functions as it has no maps ..). Thanks Example:

    
asked by anonymous 04.01.2018 / 12:10

2 answers

1

You can use the cursor property of css , for hover use grab for active use grabbing , example ... 

div {
  width: 150px;
  height: 150px;
  background: green;
  cursor: grab;
  cursor: -webkit-grab;
  cursor:-moz-grab;
}
div:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  cursor:-moz-grabbing;
}
<div></div>

To simulate in a iframe , it is necessary to put a layer on top thus giving the desired effect ... 

    .wrapper {
        position: relative;
    }
    
    .grab-cursor {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        cursor: grab;
        cursor: -webkit-grab;
        cursor:-moz-grab;
        z-index: 100;
    }
    .grab-cursor:active {
        cursor: grabbing;
        cursor: -webkit-grabbing;
        cursor:-moz-grabbing;
    }
    <div class="wrapper">
        <iframe src="http://doc.jsfiddle.net/"></iframe><divclass="grab-cursor"></div>
    </div>

You can also do with javascript, to set yourself in a specific place in the iframe ... 

var iframe = document.querySelector('iframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.body.style.cursor = 'move'; //no body
    
04.01.2018 / 12:16
0

You can use jQuery UI Draggable to drag elements on the page.

Just load the plugin into your <head> : 

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Andthenassignthemethodtoidoftheelementyouwanttodrag:

<imgid="draggable"...

<script>
$( "#draggable" ).draggable();
</script>

See example: 

$( "#draggable" ).draggable();
#draggable {
   cursor: grab;
   cursor: -webkit-grab;
   cursor:-moz-grab;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<img id="draggable" src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Junonia_lemonias_DSF_upper_by_Kadavoor.JPG" />
  

The jQuery UI code and styles should be inserted into the source code   of the iframe page.

    
04.01.2018 / 15:17
Message appears automatically after sending Installation of dependencies in npm start but not finish