Response title
This is preview!
Move this topic
drag drop in android & IOS
in Using jQuery
•
10 years ago
jquery is so cool but not darg drop in tablet browser!!
i want create application in html5 for working in pc and tablet. what am i do?
i want create application in html5 for working in pc and tablet. what am i do?
1
Replies(5)
Re: drag drop in android & IOS
10 years ago
JavaScript does the drags differently on IOS (and I guess android). Different events can be mapped into the desktop events or handled separately.
JΛ̊KE
I found some great code to remap the touch events to mouse events. In the following code I remap for ".ITEMS" .
- function touchHandler(event){
- var event = event.originalEvent,
- touches = event.changedTouches,
- first = touches[0],
- simulatedEvent = document.createEvent("MouseEvent"),
- types={touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"},
- type = types[event.type]
- if(type){
- simulatedEvent.initMouseEvent(type, true, true, window, 1,
- first.screenX, first.screenY,
- first.clientX, first.clientY, false,
- false, false, false, 0/*left*/, null);
- first.target.dispatchEvent(simulatedEvent);
- event.preventDefault();
- }
- }
- if (window.Touch) $('.ITEMS') .on('touchstart touchmove touchend touchcancel',touchHandler)
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Re: drag drop in android & IOS
10 years ago
In your script tag, Inside your Dom ready code.
JΛ̊KE
JΛ̊KE
Leave a comment on oojube's reply
Re: drag drop in android & IOS
9 years ago
Hi,
How do I apply it to my drag and drop codes? I have several objects to be dragged and dropped into a few boxes. And it will generate some feedback. After which, the whole animation can be reset. I've already done the animation for the PC. Now I need to edit the codes to enable it to be applied to both PC and tablet.
Thank you. :)
these are my codes (for it to work on the PC). I'm still trying to figure out how to make it work on tablet.
----------------------------------------------------------------------------------------------------------------------------------------------------------
Model = function(datas){
this.defaultDatas ={
draggables :
[{
name:"_1"
},{
name:"_2"
},{
name:"_3"
},{
name:"_4"
},{
name:"_5"
},{
name:"_6"
},{
name:"_7"
},{
name:"_8"
},{
name:"_9"
}],
droppables :
[{
name:"position1",
dropout:'start',
drop:'drop',
dropover:'dropover'
},{
name:"position2",
dropout:'start',
drop:'drop',
dropover:'dropover'
},{
name:"position3",
dropout:'start',
drop:'drop',
dropover:'dropover'
},{
name:"position4",
dropout:'start',
drop:'drop',
dropover:'dropover'
},{
name:"position5",
dropout:'start',
drop:'drop',
dropover:'dropover'
},{
name:"position6",
dropout:'start',
drop:'drop',
dropover:'dropover'
},{
name:"position7",
dropout:'start',
drop:'drop',
dropover:'dropover'
},{
name:"position8",
dropout:'start',
drop:'drop',
dropover:'dropover'
},{
name:"position9",
dropout:'start',
drop:'drop',
dropover:'dropover'
}],
dropOptions : {}
};//end of default values
var _datas = $.extend(this.defaultDatas,datas);
sym.$("data-div").data("model",{"itemDragged":"none","theme1":"000","theme2":"000","theme3":"000","dropConfirm":"none"});
this.get=function(property){
// forbid ojects to be passed as references by serializing de-serializing the prop.
return JSON.parse(JSON.stringify(_datas[property]));
};// end get
this.set=function(property,value){
_datas[property] = value ;
};//end set
};//end of model
Controller = function(model){
this.model = model;
this.setItemDragged = function (inval){
var values = sym.$("data-div").data("model");
values.itemDragged = inval;
sym.$("data-div").data("model",values);
}
this.setTheme = function (num,inval){
var values = sym.$("data-div").data("model");
var theme = "none";
if(num==="1"){
theme = values.theme1;
}else if(num==="2"){
theme = values.theme2;
}else if(num==="3"){
theme = values.theme3;
}
var num1 = parseInt(theme.substring(1,2));
var num2 = parseInt(theme.substring(2,3));
var num0 = 0;
if(inval>num2){
num0 = num1;
num1 = num2;
num2 = inval;
}else if(inval>num1){
num0 = num1;
num1 = inval;
}else{
num0 = inval;
}
theme = num0.toString()+num1.toString()+num2.toString();
if(num==="1"){
values.theme1=theme;
}else if(num==="2"){
values.theme2=theme;
}else if(num==="3"){
values.theme3=theme;
}
sym.$("data-div").data("model",values);
}
this.dropConfirm = function (inval){
var values = sym.$("data-div").data("model");
values["dropConfirm"] = inval;
sym.$("data-div").data("model",values);
// sym.$(inval).css({"left":220,"top":154});
}
this.get=function(property){
var values = sym.$("data-div").data("model");
return values[property];
}//end of get
var _this = this;
$(this).bind("setItemDragged",this.setItemDragged);
$(this).bind("setTheme",this.setTheme);
};//end ctrller
main = function(sym,w){
sym.play();
sym.$("stage").css("margin","auto");
sym.stop();
w.model = new Model({});
w.controller = new Controller(model);
$.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js",onJqueryUILoad);
};//end
onJqueryUILoad = function(e){
// EN : when the script is loaded
viewInit(sym);
};
viewInit = function(sym){
var a = 3;
var counter = 0;
//draggable event
$.each(model.get("draggables"),function(){
var _this = this ;
//when drag is started, this event is called
if(_this.name=="_1"){
sym.$(_this.name).draggable(
{
helper: "clone",
revert: "invalid",
start: function(event, ui) {
$(this).css("z-index", a++);
sym.$(_this.name).hide();
},//end start
stop: function(event, ui) {
if(controller.get("dropConfirm")!=_this.name){
sym.$(_this.name).show();
}
}
},
{
cursor: "crosshair",
cursorAt: { left:60,bottom:85},
opacity: 0.8
});
}else if(_this.name=="_2"){
sym.$(_this.name).draggable(
{
helper: "clone",
revert: "invalid",
start: function(event, ui) {
$(this).css("z-index", a++);
sym.$(_this.name).hide();
},//end start
stop: function(event, ui) {
if(controller.get("dropConfirm")!=_this.name){
sym.$(_this.name).show();
}
}
},
{
cursor: "crosshair",
cursorAt: { left:100,bottom:120 },
opacity: 0.8
});
}else if(_this.name=="_3"){
sym.$(_this.name).draggable(
{
helper: "clone",
revert: "invalid",
start: function(event, ui) {
$(this).css("z-index", a++);
sym.$(_this.name).hide();
},//end start
stop: function(event, ui) {
if(controller.get("dropConfirm")!=_this.name){
sym.$(_this.name).show();
}
}
},
{
cursor: "crosshair",
cursorAt: { left:120,bottom:110 },
opacity: 0.8
});
}else if(_this.name=="_4"){
sym.$(_this.name).draggable(
{
helper: "clone",
revert: "invalid",
start: function(event, ui) {
$(this).css("z-index", a++);
sym.$(_this.name).hide();
},//end start
stop: function(event, ui) {
if(controller.get("dropConfirm")!=_this.name){
sym.$(_this.name).show();
}
}
},
{
cursor: "crosshair",
cursorAt: { left:80,bottom:80 },
opacity: 0.8
});
}else if(_this.name=="_5"){
sym.$(_this.name).draggable(
{
helper: "clone",
revert: "invalid",
start: function(event, ui) {
$(this).css("z-index", a++);
sym.$(_this.name).hide();
},//end start
stop: function(event, ui) {
if(controller.get("dropConfirm")!=_this.name){
sym.$(_this.name).show();
}
}
},
{
cursor: "crosshair",
cursorAt: { left:90,bottom:75 },
opacity: 0.8
});
}else if(_this.name=="_6"){
sym.$(_this.name).draggable(
{
helper: "clone",
revert: "invalid",
start: function(event, ui) {
$(this).css("z-index", a++);
sym.$(_this.name).hide();
},//end start
stop: function(event, ui) {
if(controller.get("dropConfirm")!=_this.name){
sym.$(_this.name).show();
}
}
},
{
cursor: "crosshair",
cursorAt: { left:100,bottom:100 },
opacity: 0.8
});
}else if(_this.name=="_7"){
sym.$(_this.name).draggable(
{
helper: "clone",
revert: "invalid",
start: function(event, ui) {
$(this).css("z-index", a++);
sym.$(_this.name).hide();
},//end start
stop: function(event, ui) {
if(controller.get("dropConfirm")!=_this.name){
sym.$(_this.name).show();
}
}
},
{
cursor: "crosshair",
cursorAt: { left:65,bottom:120 },
opacity: 0.8
});
}else if(_this.name=="_8"){
sym.$(_this.name).draggable(
{
helper: "clone",
revert: "invalid",
start: function(event, ui) {
$(this).css("z-index", a++);
sym.$(_this.name).hide();
},//end start
stop: function(event, ui) {
if(controller.get("dropConfirm")!=_this.name){
sym.$(_this.name).show();
}
}
},
{
cursor: "crosshair",
cursorAt: { left:80,bottom:130 },
opacity: 0.8
});
}else if(_this.name=="_9"){
sym.$(_this.name).draggable(
{
helper: "clone",
revert: "invalid",
start: function(event, ui) {
$(this).css("z-index", a++);
sym.$(_this.name).hide();
},//end start
stop: function(event, ui) {
if(controller.get("dropConfirm")!=_this.name){
sym.$(_this.name).show();
}
}
},
{
cursor: "crosshair",
cursorAt: { left:70,bottom:80 },
opacity: 0.8
});
}
sym.$(_this.name).bind( "drag", function(event, ui) {
controller.setItemDragged(_this.name);
});// end bind
});//end each draggable
$.each(model.get("droppables"),function(){
var _this = this;
sym.$(_this.name).droppable({ greedy:true,tolerance:"pointer"});
sym.$(_this.name).bind("drop",function(event,ui){
var itemDragged = controller.get("itemDragged");
//play animation
sym.getComposition().getStage().getSymbol(_this.name).play(itemDragged);
//sym.$(itemDragged).draggable("option", "disabled", true );
//disable the droppable
sym.$(_this.name).droppable("option", "disabled", true );
//get the position num
var item = parseInt(itemDragged.substring(1,2));//item num
var position = parseInt(_this.name.substring(8,9));//position num
//console.log(_this.name.substring(8,9));
if(position<=3) {//update theme1
sym.$("category-label1").hide();
controller.setTheme("1",item);
}else if(position<=6){//update theme1
sym.$("category-label2").hide();
controller.setTheme("2",item);
}else if(position<=9){//update theme1
sym.$("category-label3").hide();
controller.setTheme("3",item);
}
var theme1 = controller.get("theme1");
var theme2 = controller.get("theme2");
var theme3 = controller.get("theme3");
if(theme1.indexOf("0")==-1&&theme2.indexOf("0")==-1&&theme3.indexOf("0")==-1){
dif1 = parseInt(theme1.substring(1,2))-parseInt(theme1.substring(0,1));
dif2 = parseInt(theme1.substring(2,3))-parseInt(theme1.substring(1,2));
dif3 = parseInt(theme2.substring(1,2))-parseInt(theme2.substring(0,1));
dif4 = parseInt(theme2.substring(2,3))-parseInt(theme2.substring(1,2));
dif5 = parseInt(theme3.substring(1,2))-parseInt(theme3.substring(0,1));
dif6 = parseInt(theme3.substring(2,3))-parseInt(theme3.substring(1,2));
if(dif1==dif2&&dif2==dif3&&dif3==dif4&&dif4==dif5&&dif5==dif6&&dif6==3){
sym.getComposition().getStage().getSymbol("feedback").play("suggest");
}else if(dif1==dif2&&dif2==dif3&&dif3==dif4&&dif4==dif5&&dif5==dif6&&dif6==1){
sym.getComposition().getStage().getSymbol("feedback").play("correct");
}else {
sym.getComposition().getStage().getSymbol("feedback").play("wrong");
}
}else{//hasn't completed yet
}
controller.dropConfirm(controller.get("itemDragged"));
});//end bind
});//end each
};//end viewInit
main(sym,window);
// insert code here
Leave a comment on ai.syah's reply
Re: drag drop in android & IOS
9 years ago
You could try my code but with
JΛ̊KE
- if (window.Touch) $('body') .on('touch start touchmove touchend touchcancel',touchHandler)
If it doesn’t work, start your own question. Preferably with a link to the live page.
JΛ̊KE
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to oojube's problem