Comments (8)
I agree on that, and those features were planned but there just wasnt enough time when the plugin was created. I will to extend it as soon as possible with those options. If you want, want, you could help? :)
from croppic.
change code of line 302 to 328 before to that.img.offset(~~~)
add validation
var pageX;
var pageY;
var userAgent = window.navigator.userAgent;
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
pageX = e.originalEvent.touches[0].pageX;
pageY = e.originalEvent.touches[0].pageY;
} else {
pageX = e.pageX;
pageY = e.pageY;
}
var z_idx = that.img.css('z-index'),
drg_h = that.img.outerHeight(),
drg_w = that.img.outerWidth(),
pos_y = that.img.offset().top + drg_h - pageY,
pos_x = that.img.offset().left + drg_w - pageX;
that.img.css('z-index', 1000).on("mousemove touchmove", function(e) {
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
var imgTop = e.originalEvent.touches[0].pageY + pos_y - drg_h;
var imgLeft = e.originalEvent.touches[0].pageX + pos_x - drg_w;
} else {
var imgTop = e.pageY + pos_y - drg_h;
var imgLeft = e.pageX + pos_x - drg_w;
}
from croppic.
@ijpe Could you please expand on how to implement the above code?
I dont have any line with that.img.offset(~~~) ?
Desperate to get it working - would really appreciate your help.
from croppic.
My initDrag code
initDrag:function(){
var that = this;
that.img.on("mousedown touchstart", function(e) {
e.preventDefault(); // disable selection
var pageX;
var pageY;
var userAgent = window.navigator.userAgent;
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
pageX = e.originalEvent.touches[0].pageX;
pageY = e.originalEvent.touches[0].pageY;
} else {
pageX = e.pageX;
pageY = e.pageY;
}
var z_idx = that.img.css('z-index'),
drg_h = that.img.outerHeight(),
drg_w = that.img.outerWidth(),
pos_y = that.img.offset().top + drg_h - pageY,
pos_x = that.img.offset().left + drg_w - pageX;
that.img.css('z-index', 1000).on("mousemove touchmove", function(e) {
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
var imgTop = e.originalEvent.touches[0].pageY + pos_y - drg_h;
var imgLeft = e.originalEvent.touches[0].pageX + pos_x - drg_w;
} else {
var imgTop = e.pageY + pos_y - drg_h;
var imgLeft = e.pageX + pos_x - drg_w;
}
that.img.offset({
top:imgTop,
left:imgLeft
}).on("mouseup", function() {
$(this).removeClass('draggable').css('z-index', z_idx);
});
if(that.options.imgEyecandy){ that.imgEyecandy.offset({ top:imgTop, left:imgLeft }); }
if( parseInt( that.img.css('top')) > 0 ){ that.img.css('top',0); if(that.options.imgEyecandy){ that.imgEyecandy.css('top', 0); } }
var maxTop = -( that.imgH-that.objH); if( parseInt( that.img.css('top')) < maxTop){ that.img.css('top', maxTop); if(that.options.imgEyecandy){ that.imgEyecandy.css('top', maxTop); } }
if( parseInt( that.img.css('left')) > 0 ){ that.img.css('left',0); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', 0); }}
var maxLeft = -( that.imgW-that.objW); if( parseInt( that.img.css('left')) < maxLeft){ that.img.css('left', maxLeft); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', maxLeft); } }
if (that.options.onImgDrag) that.options.onImgDrag.call(that);
});
}).on("mouseup", function() {
that.img.off("mousemove");
}).on("mouseout", function() {
that.img.off("mousemove");
});
},
from croppic.
Thanks!
from croppic.
Thanks so much. 👍
from croppic.
An upgrade for Drag and mousewheel support has been done.
@ijpe Great work, could leverage your work mostly. Have mentioned you also in the upgrade description.
from croppic.
Thank you for the upgrade.
On Feb 9, 2015 3:48 PM, "Mat Steinlin" [email protected] wrote:
An upgrade for Drag and mousewheel support has been done.
@ijpe https://github.com/ijpe Great work, could leverage your work
mostly. Have mentioned you also in the upgrade description.—
Reply to this email directly or view it on GitHub
#13 (comment).
from croppic.
Related Issues (20)
- Add feature: Drag n Drop
- the site is no more accessible for documentation HOT 1
- Croppic does not generate images HOT 2
- jQuery 3 compatibility issue HOT 3
- Multiple uploading
- Multiple Croppics
- Croppic as App
- Parameter issues ! HOT 1
- Download PHP Example File on your website is not working. HOT 5
- Crop high resolution image and still get a high resolution crop HOT 1
- no works
- Windows 10 Tablet, All Browsers Not Working
- zoom hide
- Can't upload a picture more than 9mo
- Controls missing
- Can`t upload File; no write Access HOT 2
- I need help with trying to save in the original file name.
- Is there or will there be a... No jQuery Version?
- I have 2 question, help please
- Upload Button HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from croppic.