有没有人知道如何在Firefox中使图像不可拖动且不可选择 - 同时不使用Javascript？看似微不足道,但问题在于:
1)可以在Firefox中拖动和突出显示:
<img src="...">
2)所以我们添加它,但拖动时仍然可以突出显示图像:
<img src="..." draggable="false">
3)所以我们添加这个,以解决突出显示问题,但后来违反直觉,图像再次变得可拖动.很奇怪,我知道!使用FF 16.0.1
<img src="..." draggable="false" style="-moz-user-select: none;">
那么,有没有人知道为什么添加"-moz-user-select:none",会以某种方式特朗普并禁用"draggable = false"？当然,webkit按预期工作.关于这一点,Interwebs上没有任何内容......如果我们能够一起发光,那就太好了.
谢谢!!
编辑: 这是关于保持UI元素不被无意拖动并提高可用性 - 不是一些跛脚尝试复制保护方案:-)
我有一个draggable()适用于Firefox和Chrome 的jQuery UI .用户界面概念基本上是单击以创建"post-it"类型项.
基本上,我点击或点击div#everything(100%高和宽)听取点击,并显示输入textarea.您添加文本,然后在完成后保存它.你可以拖动这个元素.这适用于普通浏览器,但在iPad上我可以测试,我无法拖动项目.如果我触摸选择(然后稍微变暗),我就无法拖动它.它根本不会向左或向右拖动.我可以向上或向下拖动,但我不是拖动个人div,我拖动整个网页.
所以这是我用来捕获点击的代码:
$('#everything').bind('click', function(e){
var elem = document.createElement('DIV');
STATE.top = e.pageY;
STATE.left = e.pageX;
var e = $(elem).css({
top: STATE.top,
left: STATE.left
}).html('<textarea></textarea>')
.addClass('instance')
.bind('click', function(event){
return false;
});
$(this).append(e);
});
这里是我用来"保存"音符并将输入div转换为显示div的代码:
$('textarea').live('mouseleave', function(){
var val = jQuery.trim($(this).val());
STATE.content = val;
if (val == '') {
$(this).parent().remove();
} else {
var div = $(this).parent();
div.text(val).css({
height: '30px'
});
STATE.height = 30;
if ( div.width() !== div[0].clientWidth || div.height …我正在使用jQuery draggable和droppable来开发我正在开发的工作计划系统.用户将作业拖到不同的日期或用户,然后使用ajax调用更新数据.
一切正常,除非我向下滚动主页面(作业出现在超出浏览器窗口底部的大型周规划器中).如果我尝试在这里拖动一个可拖动的元素,那么元素会出现在我的鼠标光标上方与我向下滚动的像素数量相同.悬停状态仍然可以正常工作并且功能正在爆炸,但看起来并不正确.
我正在使用jQuery 1.6.0和jQuery UI 1.8.12.
我确定我需要添加一个偏移功能,但我不知道应用它的位置,或者是否有更好的方法.这是我的.draggable()初始化代码:
$('.job').draggable({
zIndex: 20,
revert: 'invalid',
helper: 'original',
distance: 30,
refreshPositions: true,
});
知道我能做些什么来解决这个问题吗？
我正在尝试使用HTML5可拖动的API(虽然我意识到它有它的问题).到目前为止,我遇到的唯一一个显示是我无法找到一种方法来确定当一个dragover或dragenter事件触发时被拖动的内容:
el.addEventListener('dragenter', function(e) {
// what is the draggable element?
});
我意识到我可以认为它是发射dragstart事件的最后一个元素,但是......多点触控.我也试着使用e.dataTransfer.setData从dragstart附加一个唯一的标识符,但显然这些数据是不可访问从dragover/ dragenter:
只有在丢弃事件期间发生丢弃时,才能使用此数据.
那么,有什么想法吗？
更新:在撰写本文时,HTML5拖放似乎没有在任何主流移动浏览器中实现,因此在实践中提出了关于多点触控的观点.但是,我想要一个可以保证在规范的任何实现中都能使用的解决方案,这似乎不会阻止同时拖动多个元素.
我在下面发布了一个有效的解决方案,但这是一个丑陋的黑客攻击.我仍然希望有更好的答案.
所以,我有一个令人满意的div - 我正在制作一个WYSIWYG编辑器:粗体,斜体,格式化,无论如何,最近:插入花哨的图像(在一个花哨的盒子里,带有标题).
<a class="fancy" href="i.jpg" target="_blank">
<img alt="" src="i.jpg" />
Optional Caption goes Here!
</a>
用户使用我给他们提供的对话框添加这些奇特的图像:他们填写详细信息,上传图像,然后很像其他编辑器功能,我用document.execCommand('insertHTML',false,fancy_image_html);它来根据用户的选择进行填充.
所以,现在我的用户可以拍摄一个奇特的图像 - 他们需要能够移动它.用户需要能够单击并拖动图像(花式框和所有图像),以便将其放置在满足其中的任何位置.他们需要能够在段落之间移动,甚至在段落之间 - 如果他们想要的话,在两个单词之间移动它.
请记住 - 在一个可信的,简单的旧<img>标签已经被用户代理祝福,具有这种可爱的拖放功能.默认情况下,您可以将<img>标签拖放到任何地方; 默认的拖放操作就像人们梦寐以求的那样.
所以,考虑一下这种默认行为如何对我们的<img>伙伴们如此有用- 我只想稍微扩展这种行为以包含更多的HTML - 这似乎应该是容易实现的.
首先,我<a>使用draggable属性设置我的花哨标签,并禁用contenteditable(不确定是否有必要,但似乎它可能也是关闭):
<a class="fancy" [...] draggable="true" contenteditable="false">
然后,因为用户仍然可以将图像拖出花哨的<a>盒子,我不得不做一些CSS.我在Chrome上工作,所以我只向你展示-webkit-前缀,尽管我也使用了其他的.
.fancy {
-webkit-user-select:none;
-webkit-user-drag:element; }
.fancy>img {
-webkit-user-drag:none; }
现在,用户可以拖动整个花哨的盒子,并且稍微部分褪色的点击拖动表示图像反映了这一点 - 我可以看到我现在正在拿起整个盒子:)
我已经尝试了几种不同CSS属性的组合,上面的组合似乎对我有意义,并且似乎效果最好.
我希望只有这个CSS就足以让浏览器使用整个元素作为可拖动的项目,自动向用户授予我一直梦寐以求的功能...... 然而,它似乎比这更复杂.
这种拖放似乎比它需要的更复杂.
所以,我开始深入研究DnD api文档,现在我被卡住了.所以,这就是我所操作的(是的,jQuery):
$('.fancy')
.bind('dragstart',function(event){
//console.log('dragstart');
var dt=event.originalEvent.dataTransfer;
dt.effectAllowed …正如标题所说,我试图在不使用jQuery UI的情况下使div可拖动.
但是,我坚持使用下面的代码.我明白我将使用相对于容器div的鼠标位置(其中div应该被拖动),并且我将相对于这些值设置divs偏移.
我只是无法弄清楚如何.有什么线索吗？
这段代码(当然)不起作用:
var X, Y;
$(this).mousedown(function() {
$(this).offset({
left: X,
top: Y
});
});
$("#containerDiv").mousemove(function(event) {
X = event.pageX;
Y = event.pageY;
});
这是我更新和修改过的脚本,它完全可以工作,除了我想要普及它...观察****我怎么能这样做,这样我function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e);每次都不需要使用可拖动功能对于不同的元素？
window.onload = addListeners;
var BOX = function(){
return{
Draggable: function(){}
};
}();
function addListeners(){
document.getElementById('div').addEventListener('contextmenu', menumove, false);
**document.getElementById('div').addEventListener('mousedown', function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e);}, false);**
}
function elementDraggable(e){
var e = e || window.event;
var div = BOX.Draggable.elemen;
BOX.Draggable.innerX = e.clientX + window.pageXOffset - div.offsetLeft;
BOX.Draggable.innerY = e.clientY + window.pageYOffset - div.offsetTop;
window.addEventListener('mousemove', elementMove, false);
window.addEventListener('mouseup', function(){
window.removeEventListener('mousemove', elementMove, false);
}, true);
function elementMove(e){
div.style.position = 'absolute';
div.style.left = e.clientX + window.pageXOffset …我试图在页面上的某些div上使用可拖动效果,但每当我加载页面时,我都会收到错误消息:
Error: $(".draggable").draggable is not a function
我已经看过它似乎其他人有这个问题因为他们没有包含jQuery UI javascript文件,但我肯定有.
以下是我页面的标题内:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
谁有人建议解决方案？
任何建议表示赞赏
谢谢.
快速编辑,我也有jquery工具js包含在页面的头部,如果我删除它工作正常.有没有人设法让这两个人一起工作？
我有一个可拖动的对象(div),还有一些可放置的对象(表TD).我希望用户将我的可拖动对象拖到其中一个可放置的TD上.
我以这种方式启用draggable和droppable:
$(".draggable").draggable();
$(".droppable").droppable();
问题在于,用户可以将div拖动到屏幕上的任何位置,包括从可放置区域移出.
如何限制可拖动对象的边界区域？
我会解释.我设法在地图上有一个可拖动的针脚.我想检索此点的坐标并将它们放入两个字段:纬度和经度.稍后这些坐标将通过PHP发送到SQL表.这是我打算做的一个例子,但它只是一个而不是几个引脚,它是可拖动的.问题是:我甚至无法显示初始点的坐标.当然,当用户移动引脚时,我希望坐标也在字段中改变.我希望我清楚自己.我做错了什么？我应该使用地理编码服务吗？
这是JS:
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(40.713956,-74.006653);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
draggable: true,
position: myLatlng,
map: map,
title: "Your location"
});
google.maps.event.addListener(marker,'click',function(overlay,point){
document.getElementById("latbox").value = lat();
document.getElementById("lngbox").value = lng();
});
}
</script>
和HTML:
<html>
<body onload="initialize()">
<div id="map_canvas" style="width:50%; height:50%"></div>
<div id="latlong">
<p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p>
<p>Longitude: <input size="20" type="text" …