Scroll on image by dragging

1

Hi,

I have a image in a div with overflow: scroll defined on it. Now I want to implement that I can scroll on the image by dragging my mouse on it.

I tried GitHub - asvd/dragscroll: micro library for drag-n-drop scrolling style but this doesn’t seem to work in EmberJS.

This is my hbs part:

{{#draggable-dropzone dropped="addMarker"}}
      <div class="map-view dragscroll">
        {{#if selectedMap}}
          {{#unless (eq selectedMap.type "google_map")}}
            <div class="" style="position:relative;">
              <img class="" src="{{selectedMap.image_highres}}">
              {{#if categoryId}}
                {{#each model.hotspots as |hotspot|}}
                  {{#unless (eq hotspot.x_axis "")}}
                    {{#if (eq categoryId hotspot.category)}}
                      {{#draggable-item content=hotspot.id dragEnter=(route-action "setIsDragged" "isDragged") dragEnd=(route-action "setIsDragged" false)}}
                        <span {{action 'showMarkerModal' hotspot.id}} class="normal-markers {{isDragged}}"  style="position:absolute;top:{{hotspot.y_axis}}px;left:{{hotspot.x_axis}}px;"><i class="fa fa-map-marker"></i></span>
                      {{/draggable-item}}
                      <span style="position:absolute;top:{{hotspot.y_axis}}px;left:{{hotspot.x_axis}}px;">
                        {{#liquid-if (eq markerModal hotspot.id)  class="marker-modal1"}}
                          <span {{action 'closeMarkerModal'}} class="marker-modal" >{{hotspot.name}}</span>
                        {{/liquid-if}}
                      </span>
                    {{/if}}
                  {{/unless}}
                {{/each}}
              {{/if}}
            </div>
          {{else}}
            {{g-map lat=selectedMap.gmap_lat_center lng=selectedMap.gmap_long_center zoom=12}}
          {{/unless}}
        {{/if}}
    </div>
{{/dragable-dropzone}}
2

jQuery.kinetic | jquery.kinetic has done the trick