Skip to content

Commit

Permalink
upd draggable, add drag in area
Browse files Browse the repository at this point in the history
  • Loading branch information
@olton
olton committed Sep 13, 2015
1 parent 31f9e75 commit 4b58b0e
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 40 deletions.
30 changes: 18 additions & 12 deletions build/js/metro.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4175,32 +4175,38 @@ $.widget( "metro.draggable" , {
'z-index': '2000'
});

var dragArea = o.dragArea ? $(o.dragArea) : $(window);
var os = {
left: o.dragArea ? dragArea.offset().left : 0,
top: o.dragArea ? dragArea.offset().top : 0
};

var drg_h = element.outerHeight(),
drg_w = element.outerWidth(),
pos_y = element.offset().top + drg_h - e.pageY,
pos_x = element.offset().left + drg_w - e.pageX;

var dragArea = o.dragArea ? $(o.dragArea) : $(window);
//console.log(pos_x, pos_y);

dragArea.on('mousemove', function(e){
var offset;
var offset, pageX, pageY;

if (!that.drag) return false;

var os = {
left: o.dragArea ? dragArea.offset().left : 0,
top: o.dragArea ? dragArea.offset().top : 0
};

var t = (e.pageY > 0)?(e.pageY + pos_y - drg_h):(0);
var l = (e.pageX > 0)?(e.pageX + pos_x - drg_w):(0);
pageX = e.pageX - os.left;
pageY = e.pageY - os.top;

var t = (pageY > 0) ? (pageY + pos_y - drg_h) : (0);
var l = (pageX > 0) ? (pageX + pos_x - drg_w) : (0);
var t_delta = dragArea.innerHeight() + dragArea.scrollTop() - element.outerHeight();
var l_delta = dragArea.innerWidth() + dragArea.scrollLeft() - element.outerWidth();

if(t >= 0 && t <= dragArea.innerHeight() + dragArea.scrollTop() - element.outerHeight()) {
element.offset({top: t});
if(t >= 0 && t <= t_delta) {
element.offset({top: t + os.top});
}
if(l >= 0 && l <= dragArea.innerWidth() + dragArea.scrollLeft() - element.outerWidth()) {
element.offset({left: l});
if(l >= 0 && l <= l_delta) {
element.offset({left: l + os.left});
}

offset = {
Expand Down
7 changes: 4 additions & 3 deletions build/js/metro.min.js
View file

Large diffs are not rendered by default.

12 changes: 11 additions & 1 deletion docs/draggable.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,20 +36,30 @@ <h1><a href="index.html" class="nav-button transform"><span></span></a>&nbsp;Dra

<div class="example" data-text="example">
<div class="grid">
<div class="row">
<div class="row cells2">
<div class="cell">
<h5>Simple draggable</h5>
<div class="padding40 align-center">
<div class="bg-red padding20 inline-block" style="width: 50px" data-role="draggable"></div>
</div>
</div>
<div class="cell">
<h5>Area draggable</h5>
<div class="padding40 align-center debug" id="dragarea">
<div class="bg-red padding20 inline-block" style="width: 50px" data-role="draggable" data-drag-area="#dragarea"></div>
</div>
</div>
</div>
</div>
</div>

<div class="example" data-text="code">
<pre class="prettyprint linenums no-scroll-x"><code>
&lt;div data-role="draggable"&gt;&lt;/div&gt;

&lt;div id="area1"&gt;
&lt;div data-role="draggable" data-drag-area="#area1"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>

Expand Down
30 changes: 18 additions & 12 deletions docs/js/metro.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4175,32 +4175,38 @@ $.widget( "metro.draggable" , {
'z-index': '2000'
});

var dragArea = o.dragArea ? $(o.dragArea) : $(window);
var os = {
left: o.dragArea ? dragArea.offset().left : 0,
top: o.dragArea ? dragArea.offset().top : 0
};

var drg_h = element.outerHeight(),
drg_w = element.outerWidth(),
pos_y = element.offset().top + drg_h - e.pageY,
pos_x = element.offset().left + drg_w - e.pageX;

var dragArea = o.dragArea ? $(o.dragArea) : $(window);
//console.log(pos_x, pos_y);

dragArea.on('mousemove', function(e){
var offset;
var offset, pageX, pageY;

if (!that.drag) return false;

var os = {
left: o.dragArea ? dragArea.offset().left : 0,
top: o.dragArea ? dragArea.offset().top : 0
};

var t = (e.pageY > 0)?(e.pageY + pos_y - drg_h):(0);
var l = (e.pageX > 0)?(e.pageX + pos_x - drg_w):(0);
pageX = e.pageX - os.left;
pageY = e.pageY - os.top;

var t = (pageY > 0) ? (pageY + pos_y - drg_h) : (0);
var l = (pageX > 0) ? (pageX + pos_x - drg_w) : (0);
var t_delta = dragArea.innerHeight() + dragArea.scrollTop() - element.outerHeight();
var l_delta = dragArea.innerWidth() + dragArea.scrollLeft() - element.outerWidth();

if(t >= 0 && t <= dragArea.innerHeight() + dragArea.scrollTop() - element.outerHeight()) {
element.offset({top: t});
if(t >= 0 && t <= t_delta) {
element.offset({top: t + os.top});
}
if(l >= 0 && l <= dragArea.innerWidth() + dragArea.scrollLeft() - element.outerWidth()) {
element.offset({left: l});
if(l >= 0 && l <= l_delta) {
element.offset({left: l + os.left});
}

offset = {
Expand Down
30 changes: 18 additions & 12 deletions js/widgets/draggable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,32 +57,38 @@ $.widget( "metro.draggable" , {
'z-index': '2000'
});

var dragArea = o.dragArea ? $(o.dragArea) : $(window);
var os = {
left: o.dragArea ? dragArea.offset().left : 0,
top: o.dragArea ? dragArea.offset().top : 0
};

var drg_h = element.outerHeight(),
drg_w = element.outerWidth(),
pos_y = element.offset().top + drg_h - e.pageY,
pos_x = element.offset().left + drg_w - e.pageX;

var dragArea = o.dragArea ? $(o.dragArea) : $(window);
//console.log(pos_x, pos_y);

dragArea.on('mousemove', function(e){
var offset;
var offset, pageX, pageY;

if (!that.drag) return false;

var os = {
left: o.dragArea ? dragArea.offset().left : 0,
top: o.dragArea ? dragArea.offset().top : 0
};

var t = (e.pageY > 0)?(e.pageY + pos_y - drg_h):(0);
var l = (e.pageX > 0)?(e.pageX + pos_x - drg_w):(0);
pageX = e.pageX - os.left;
pageY = e.pageY - os.top;

var t = (pageY > 0) ? (pageY + pos_y - drg_h) : (0);
var l = (pageX > 0) ? (pageX + pos_x - drg_w) : (0);
var t_delta = dragArea.innerHeight() + dragArea.scrollTop() - element.outerHeight();
var l_delta = dragArea.innerWidth() + dragArea.scrollLeft() - element.outerWidth();

if(t >= 0 && t <= dragArea.innerHeight() + dragArea.scrollTop() - element.outerHeight()) {
element.offset({top: t});
if(t >= 0 && t <= t_delta) {
element.offset({top: t + os.top});
}
if(l >= 0 && l <= dragArea.innerWidth() + dragArea.scrollLeft() - element.outerWidth()) {
element.offset({left: l});
if(l >= 0 && l <= l_delta) {
element.offset({left: l + os.left});
}

offset = {
Expand Down

0 comments on commit 4b58b0e

Please sign in to comment.