jquery - Javascript draggable div background -


i got little problem, tried modify code 1 day.. without success.



problem that: draggable works good, can drag without problem image.. goes further image make me see blue of background color.

i know right problem bounds, don't know to.. resolve problem, tried grab x , y image without success. 

$(document).ready(function(){ var $bg = $('.bg-img'),     data = $('#data')[0],     elbounds = {         w: parseint($bg.width()),          h: parseint($bg.height())     },     bounds = {w: 2350 - elbounds.w, h: 1750 - elbounds.h},     origin = {x: 0, y: 0},     start = {x: 0, y: 0},     movecontinue = false;  function move (e){     var inbounds = {x: false, y: false},         offset = {             x: start.x - (origin.x - e.clientx),              y: start.y - (origin.y - e.clienty)         };      data.value = 'x: ' + offset.x + ', y: ' + offset.y;      inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w;     inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h;      if (movecontinue && inbounds.x && inbounds.y) {         start.x = offset.x;         start.y = offset.y;          $(this).css('background-position', start.x + 'px ' + start.y + 'px');     }      origin.x = e.clientx;     origin.y = e.clienty;      e.stoppropagation();     return false; }  function handle (e){     movecontinue = false;     $bg.unbind('mousemove', move);      if (e.type == 'mousedown') {         origin.x = e.clientx;         origin.y = e.clienty;         movecontinue = true;         $bg.bind('mousemove', move);     } else {         $(document.body).focus();     }      e.stoppropagation();     return false; }  function reset (){     start = {x: 0, y: 0};     $(this).css('backgroundposition', '0 0'); }  $bg.bind('mousedown mouseup mouseleave', handle); $bg.bind('dblclick', reset); });

example code: https://jsfiddle.net/zt1jjzql/3/

here modify couple of things;

  • new function calculate image dimensions
  • calculate left , image can move.
  • limit movement , left those.

$(document).ready(function() {    var $bg = $('.bg-img'),      data = $('#data')[0],      elbounds = {        w: parseint($bg.width()),        h: parseint($bg.height())      },      bounds = {        w: 2350 - elbounds.w,        h: 1750 - elbounds.h      },      origin = {        x: 0,        y: 0      },      start = {        x: 0,        y: 0      },      movecontinue = false;    bgsize($bg, function(w, h) { //act on , store , left      console.log(`image dimensions => width:${w}, height:${h}`);      $bg.data("mostleft", (elbounds.w * -1) + w);      $bg.data("mostup", (elbounds.h * -1) + h);    });        function move(e) {      var inbounds = {          x: false,          y: false        },        offset = {          x: start.x - (origin.x - e.clientx),          y: start.y - (origin.y - e.clienty)        };        data.value = 'x: ' + offset.x + ', y: ' + offset.y;        inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w;      inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h;        if (movecontinue && inbounds.x && inbounds.y) {        // ensure , left limited appropriately        start.x = offset.x < ($bg.data("mostleft") * -1) ? ($bg.data("mostleft") * -1) : offset.x;        start.y = offset.y < ($bg.data("mostup") * -1) ? ($bg.data("mostup") * -1) : offset.y;          $(this).css('background-position', start.x + 'px ' + start.y + 'px');      }        origin.x = e.clientx;      origin.y = e.clienty;        e.stoppropagation();      return false;    }      function handle(e) {      movecontinue = false;      $bg.unbind('mousemove', move);        if (e.type == 'mousedown') {        origin.x = e.clientx;        origin.y = e.clienty;        movecontinue = true;        $bg.bind('mousemove', move);      } else {        $(document.body).focus();      }        e.stoppropagation();      return false;    }      function reset() {      start = {        x: 0,        y: 0      };      $(this).css('backgroundposition', '0 0');    }      $bg.bind('mousedown mouseup mouseleave', handle);    $bg.bind('dblclick', reset);  });  //function accurately calculate image size.  function bgsize($el, cb) {    $('<img />')      .load(function() {        cb(this.width, this.height);      })      .attr('src', $el.css('background-image').match(/^url\("?(.+?)"?\)$/)[1]);  }
div.bg-img {    background-image: url(http://i.imgur.com/zcdmwnx.gif);    background-position: 0 0;    background-repeat: no-repeat;    background-color: blue;    border: 1px solid #aaa;    width: 500px;    height: 250px;    margin: 25px auto;  }    p,  #data {    text-align: center;  }    #data {    background: red;    font-weight: bold;    color: white;    padding: 5px;    font-size: 1.4em;    border: 1px solid #ddd;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="bg-img"></div>  <p>    <input type="text" id="data" />  </p>


Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more