0
我想知道是否有一個拖動功能的觸摸不使用jQuery UI,可以用於下面的代碼,或者如果此代碼可能被修改爲包含觸摸代碼。簡單拖動從左到右的觸摸功能
插件,修改個人用途: (https://github.com/scazzy/jQuery-Draggable)
$.fn.draggable = function (opt) {
var prevX=0;
var base = this;
var settings = {
handle: "",
cursor: "move",
axis: null,
containParent: false
};
opt = $.extend(settings, opt);
if (opt.handle === "") {
var $el = base;
} else {
var $el = base.find(opt.handle);
}
return $el.css('cursor', opt.cursor).on("mousedown", function (e) {
if (opt.handle === "") {
var $drag = $(this).addClass('draggable');
} else {
var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
}
var z_idx = $drag.css('z-index'),
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
var parent = $(this).parent();
var parW = parent.width(),
parH = parent.height();
var parX1 = parseInt(parent.offset().left) + parseInt(parent.css('padding-left').replace('px', '')),
parX2 = parX1 + parW,
parY1 = parseInt(parent.offset().top) + parseInt(parent.css('padding-top').replace('px', '')),
parY2 = parY1 + parH;
$drag.css('z-index', 1000).parents().on("mousemove", function (e) {
var off_top = e.pageY + pos_y - drg_h,
off_left = e.pageX + pos_x - drg_w,
offst = null;
if (opt.containParent === true) {
if (off_left > parX2 - drg_w) {
off_left = parX2 - drg_w;
window.location = $('.draggable').attr('href');
}
if (off_top < parY1) {
off_top = parY1;
}
if (off_top > parY2 - drg_h) {
off_top = parY2 - drg_h;
}
if(prevX < off_left) {
prevX = off_left;
}
if(prevX >= off_left) {
off_left = prevX;
}
if (off_left < parX1) {
off_left = parX1;
}
if (off_left < parX2 - drg_w) {
var imgWidth = $('.draggable').position();
$('.draggable').siblings('img').css('width', imgWidth.left);
var imgHeight = $('.draggable').siblings('img').height();
$('.draggable').parent('.divider').css('height', imgHeight+'px');
}
}
if (opt.axis == "x") {
offst = {
left: off_left
};
} else if (opt.axis == "y") {
offst = {
top: off_top
};
} else {
offst = {
left: off_left,
top: off_top
};
}
$('.draggable').offset(offst);
$('.draggable, html').on("mouseup", function() {
$drag.parents().off('mousemove');
$($el).removeClass('draggable').css('z-index', z_idx);
});
});
e.preventDefault(); // disable selection
}).on("mouseup", function() {
if (opt.handle === "") {
$(this).removeClass('draggable');
} else {
$(this).removeClass('active-handle').parent().removeClass('draggable');
}
$el.off('mousedown', function (e) {
e.preventDefault()
});
});
}
調用插件:
/* end scissors plugin, start scissors */
$('.scissors').click(function(e){e.preventDefault();});
$(".scissors").draggable({
containParent: true,
axis: 'x',
cursor: 'e-resize'
});
的HTML:
<div class="divider">
<a href="" title="Drag to view the puzzle" class="scissors"></a>';
<img src="/wp-content/themes/pd/images/page-curl.png" width="0" alt="cutting paper" />
</div>
的CSS:
.divider { margin: 40px 0; border-top: 1px dashed #1abff0; background: #fff; position: relative; }
.scissors { position: relative; display: inline-block; top: 0; }
.scissors:after { width: 22px; height: 16px; content: "\e606"; font-family: 'icomoon', Arial, Helvetica, sans-serif; font-size: .7em; position: absolute; left: -22px; top: -29px; color: #232323; z-index: 1000; }
.scissors.draggable:after { content: "\e605"; }
.divider img { position: absolute; top: 0; max-height: none !important; z-index: 0; }
您可能會看到它在這裏的行動(拖動剪刀): http://playfuldevotions.com
這與鼠標手勢效果很好,但不能碰。
提前致謝!
我發現了一個接近工作的解決方案,但我不確定如何在最初不需要點擊事件的情況下使其工作。 http://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices/6362527#6362527只是不知道在哪裏把init(),以便滾動事件不會被劫持。 – Sue