这是一个不起眼的问题,但我正在使用jQuery Sortables并试图让两个连接列表很好地协同工作fixed.一切正常,直到你滚动页面,使两个列表最终位于彼此的顶部.然后列表似乎对哪一个应该接收被拖动的项目感到困惑,这意味着当每个列表中出现/消失时,会发生一堆抖动.
看起来问题是两个列表都在处理鼠标/排序事件,因为被拖动的项目在技术上是在两个列表上,但我想要的是让覆盖列表(即position: fixed一个)吞下事件以便底层主要列表不会尝试接收该项目.
这是最小的代码示例:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<style type="text/css">
ul { list-style-type: none; padding: 0; float: left; }
li { margin: 5px; padding: 5px; width: 500px; border: solid 1px #F00; background-color: #FFF; }
#overlayed { position: fixed; top: 0; background-color: #000; margin: 20px; padding: 10px; }
#overlayed li { width: 50px; float: left; }
</style>
<script type="text/javascript">
$(function() {
$("ul").sortable({ connectWith: "ul", opacity: 0.6 }).disableSelection();
});
</script>
</head>
<body>
<div …我在这里有一个简单的例子,它不是在Chrome 11中为我开火http://jsfiddle.net/G9mJw/,它包含一个非常简单的代码:
var dropzone = document.getElementById('dropzone'),
draggable = document.getElementById('draggable');
function onDragOver(event) {
var counter = document.getElementById('counter');
counter.innerText = parseInt(counter.innerText, 10) + 1;
}
dropzone.addEventListener('dragover', onDragOver, false);
它似乎在safari中工作得很好......但是在Chrome中,dragover当红色方块触摸虚线时,事件不会被调用.
我试图复制一些目前正在使用chrome的示例,但它对我来说也不起作用.
我已经尝试阻止默认行为,如果工作但看不到它.任何帮助将非常感激.
谢谢
有兴趣使用JQuery/AJAX/PHP构建我自己的drag'n'drop文件上传器.
基本上我想要一个文件上传器,我的网站用户只需将文件从他们的计算机拖到我创建的div中,然后它就会将文件上传到所选目的地.
我想从头开始构建这个,而不是使用任何插件,以便我可以更好地操纵限制(文件类型,大小,目标文件夹等)
谷歌没有运气,只有插件.无论如何可以引导我朝着正确的方向前进吗？
更新 好的,所以我想出了如何做我想要的.只需将文件输入字段不透明度设置为1即可隐藏,您仍然可以将文件拖到该常规区域中,如果您点击文本字段,它将捕获它.但是,我想知道如何增加文件输入字段的高度/宽度(在文件上尝试了基本的css,但它只增加了'浏览'按钮的大小,而不是你可以将文件放入的实际字段.任何想法如何做到这一点？我基本上想要一个大的方形div,说'在这里删除文件'.所以我需要调整输入字段的大小.
我在网上搜索,大多数人找到了无法完成的答案.
我的情况有点不同,因为我们开发的应用程序仅用于内部目的,并且可以允许浏览器中的任何安全级别.它也是基于内联网的.
我还试图看看是否有现成的activex控件,但无法找到一个允许直接从outlook中拖动的控件.
有任何想法吗？
我希望在Objective-C中为IOS平台实现一些东西.
我想要两个GUI对象,我们只是说它们是简单的UIImage并且是方形.
然后我有一个"空"的GUI元素,它只是一个相同大小的灰色方块.
我希望用户能够将其中一个正方形图像拖到空白正方形上,只要图像的某些部分触及空白正方形,它就会捕捉到空白正方形并将其填满.如果他们将图像放在其他任何地方,它会动画回到原始位置.
同样,我希望有2个其他方形图像和另一个空方块,但具有相同的交互,但每组2个图像和1个空方块不能在彼此之间工作.即前两个图像只能掉入第一个空方块.
我假设有一些我想要捕获的丢弃事件,然后确定图像元数据是否与它被放入的空方块匹配.
如果您知道任何代码示例或应用程序,我当然可以通过代码来理解,或者如果您有一些对象,事件和属性指向我将是伟大的.
这不是一个游戏和应用程序一样多,所以我不想在任何游戏引擎中工作,但如果这是一个简单的方法,那么我就是为了这一切.
在我有限制的JavaScript经验之前,我会告诉你.
$('#xhr-filebox').bind({
"dragover": HandleDragEvent,
"dragleave": HandleDragEvent,
"drop": HandleDropEvent
});
function HandleDropEvent(e){
var files = e.target.files || e.dataTransfer.files;
UploadFile(files[0]);
}
(省略了一些代码,但如果你要求,我会添加更多代码)
......和HTML:
<div class="filebox" id="xhr-filebox">
<p id="xhr-action">...or click me to pick one.</p>
</div>
但是,当我将文件拖入其中时,Chrome JS控制台会说:
未捕获的TypeError:无法读取未定义的属性"文件"
但是,从文件输入读取时,它可以获取FileList对象.
奇怪的是,当我登录事件参数(执行console.log(E)),它会记录它作为f.event,而在我的一个类似的脚本,它会记录它的MouseEvent(截图:HTTP://i.stack.imgur .com/3krcT.png)
与jQuery中的bind()函数不同,它使用getElementById()返回的DOM对象的addEventListener()函数,IE这是纯JavaScript.我尝试过这种方法但没有新的事情发生.
我使用一些专有软件进行DJ(Native Instruments Traktor).如果您不熟悉这种事情,只需将其视为一个美化的iTunes:它浏览并播放音频文件.
我想为此构建一个自定义文件浏览器应用程序,但没有任何类型的API.这不,但是,允许音频文件拖动,然后从文件系统,这是一个很好的开始下降.
我正在设计的文件浏览器的性质意味着我不想实际拖放东西 - 我只想在我的应用程序中单击一个组件,并具有相同的效果.所以我正在寻找从我的文件浏览器应用程序以编程方式触发另一个应用程序上的drop事件的方法.
我选择的平台是Python和PyQt,但我开始觉得我可能需要更低级别.虽然没有做过大量的C#/ Java,但这可能是一个学习曲线(我已经完成了很多ANSI C,但这可能太低了 ......)
这是我有多远:
所以现在我需要删除中间人,然后点击,打包我的MIME数据,让Traktor认为我已经将它拖放到它上面.
我还在OSX开发人员的文档中做了一些深入研究,特别是这些东西,它描述了传递给目标应用程序(丢弃目标)的消息序列.
这一切都是有道理的,但是我正濒临下降到C#/ Java试图模仿这些消息,这听起来像兔子洞,如果我可以避免它,我宁愿不冒险.
所以,在我做之前......
我知道我可以用点击自动化做到这一点,但我可以想象,真的不可靠,会大量依赖窗户的位置等.
提前致谢!
我想创建一个树状结构,用户可以拖放树叶.我的起点如下:
HTML
<div ng:controller="controller">
<ul ui-sortable ng-model="items" ui-options="{connectWith: '.item'}" class="item">
<li ng-repeat="item in items" class="item">
{{ item.name }}
<ul ui-sortable ng-model="item.children" ui-options="{connectWith: '.item'}" class="item">
<li ng-repeat="item in item.children" class="item">{{ item.name }}</li>
</ul>
</li>
</ul>
<pre>{{ items | json }}</pre>
</div>
<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.min.js"></script>
CoffeeScript的
myapp = angular.module 'myapp', ['ui']
myapp.controller 'controller', ($scope) ->
$scope.items = [
{id: 1, name: 'Item 1', children: [
{id: 5, name: 'SubItem 1.1', children: [
{id: 11, name: 'SubItem 1.1.1', children: []},
{id: 12, …Android上拖放的默认行为显然允许将DragShadow拖动到屏幕上的任何位置.
我想限制它可以被拖动的区域 - 要么是指定的边界框,要么限制到特定视图的边界.
我看到我可以使用onInterceptTouchEvent监视拖动位置,但是我没有看到任何修改拖动位置的方法.
有人做过这个吗？
编辑:由于我在这里没有答案,从来没有找到任何其他合适的答案,我编写了自己的实现.它不使用拖放式api,而是模拟它.请参阅https://github.com/rfreedman/android-constrained-drag-and-drop-view
我正在学习拖拽.我在JSFiddle中复制了一个W3Schools示例.
W3School示例调用preventDefault()drop事件:
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
但是,我不理解阅读文档时的需要.当我删除此调用时,该示例仍然正常工作:
function drop(ev) {
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
那么,这次通话的用途是preventDefault()什么？我真的需要它吗？如果是,为什么？
drag-and-drop ×10
javascript ×4
jquery ×3
file-upload ×2
ajax ×1
android ×1
angularjs ×1
asp.net ×1
events ×1
fixed ×1
html ×1
html5 ×1
ios ×1
macos ×1
objective-c ×1
outlook-vba ×1
php ×1
pyqt ×1
python ×1
tree ×1
xcode ×1