标签: drag-and-drop
将图像拖放到Web表单中
我们有一个网页(主要是HTML javascript和PHP),允许用户上传图像.我们有正常的浏览按钮,它工作正常.但是,我们希望添加将图像拖放到文本字段中的功能.
gmail允许你在他们的邮件应用程序中执行此操作,因此它是可能的.我们想到的唯一方法就是创建一个完成所有这一切的java applet,但最终会变得非常混乱.
你有没有这样做过？它是如何工作的？
编辑:我在Mac上使用Firefox.我的大多数用户可能会在Windows上使用IE.
谢谢
推荐指数
解决办法
查看次数
处理重叠的jQuery可排序列表
这是一个不起眼的问题,但我正在使用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 …推荐指数
解决办法
查看次数
HTML5拖放ondragover未在Chrome中触发
我在这里有一个简单的例子,它不是在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 - 拖动删除文件 - 如何获取文件信息？
有兴趣使用JQuery/AJAX/PHP构建我自己的drag'n'drop文件上传器.
基本上我想要一个文件上传器,我的网站用户只需将文件从他们的计算机拖到我创建的div中,然后它就会将文件上传到所选目的地.
我想从头开始构建这个,而不是使用任何插件,以便我可以更好地操纵限制(文件类型,大小,目标文件夹等)
谷歌没有运气,只有插件.无论如何可以引导我朝着正确的方向前进吗？
更新 好的,所以我想出了如何做我想要的.只需将文件输入字段不透明度设置为1即可隐藏,您仍然可以将文件拖到该常规区域中,如果您点击文本字段,它将捕获它.但是,我想知道如何增加文件输入字段的高度/宽度(在文件上尝试了基本的css,但它只增加了'浏览'按钮的大小,而不是你可以将文件放入的实际字段.任何想法如何做到这一点？我基本上想要一个大的方形div,说'在这里删除文件'.所以我需要调整输入字段的大小.
推荐指数
解决办法
查看次数
在OSX中的另一个应用程序上触发掉落事件
我使用一些专有软件进行DJ(Native Instruments Traktor).如果您不熟悉这种事情,只需将其视为一个美化的iTunes:它浏览并播放音频文件.
我想为此构建一个自定义文件浏览器应用程序,但没有任何类型的API.这不,但是,允许音频文件拖动,然后从文件系统,这是一个很好的开始下降.
我正在设计的文件浏览器的性质意味着我不想实际拖放东西 - 我只想在我的应用程序中单击一个组件,并具有相同的效果.所以我正在寻找从我的文件浏览器应用程序以编程方式触发另一个应用程序上的drop事件的方法.
我选择的平台是Python和PyQt,但我开始觉得我可能需要更低级别.虽然没有做过大量的C#/ Java,但这可能是一个学习曲线(我已经完成了很多ANSI C,但这可能太低了 ......)
这是我有多远:
- 我做了一个非常简单的PyQt应用程序
- 我拖动应用程序中的QLabel时可以创建QDrag对象
- 我可以附加所有正确的MIME数据来表示音频文件
- 因此,如果我将QLabel从我的应用程序拖放到Traktor中,它会识别音频文件并播放它 - 好时光
所以现在我需要删除中间人,然后点击,打包我的MIME数据,让Traktor认为我已经将它拖放到它上面.
我还在OSX开发人员的文档中做了一些深入研究,特别是这些东西,它描述了传递给目标应用程序(丢弃目标)的消息序列.
这一切都是有道理的,但是我正濒临下降到C#/ Java试图模仿这些消息,这听起来像兔子洞,如果我可以避免它,我宁愿不冒险.
所以,在我做之前......
- 这甚至可能吗？或者我是否会遇到某种跨应用安全障碍等？(删除目的地只直接从操作系统或其他东西接受消息)
- 如果是,有没有更简单的方法呢？理想情况下使用PyQt/Tkinter/wxPython ......？
我知道我可以用点击自动化做到这一点,但我可以想象,真的不可靠,会大量依赖窗户的位置等.
提前致谢!
推荐指数
解决办法
查看次数
在drop事件上是否真的需要调用preventDefault()？
我正在学习拖拽.我在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()什么？我真的需要它吗？如果是,为什么？
推荐指数
解决办法
查看次数
将数据从datagridview拖放到另一个
我有2个datagridviews,我想将数据从datagridview1复制到datagridview2(一次一个单元格).我能够选择我想要的单元格并将其拖到datagridview2但是值没有显示...我花了大部分时间寻找解决方案...可能是一个简单的答案或者我只需要睡觉,但请帮助....我有以下代码
private void dataGridView1_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
DataGridView.HitTestInfo info = dataGridView1.HitTest(e.X, e.Y);
if (info.RowIndex >= 0)
{
if (info.RowIndex >= 0 && info.ColumnIndex >= 0)
{
string text = (String)
dataGridView1.Rows[info.RowIndex].Cells[info.ColumnIndex].Value;
if (text != null)
dataGridView1.DoDragDrop(text, DragDropEffects.Copy);
}
}
}
}
private void dataGridView2_DragDrop(object sender, DragEventArgs e)
{
string cellvalue=e.Data.GetData(typeof(string)) as string;
Point cursorLocation=this.PointToClient(new Point(e.X,e.Y));
System.Windows.Forms.DataGridView.HitTestInfo hittest= dataGridView2.HitTest(cursorLocation.X,cursorLocation.Y);
if (hittest.ColumnIndex != -1
&& hittest.RowIndex != -1)
dataGridView2[hittest.ColumnIndex, hittest.RowIndex].Value = cellvalue;
}
private void dataGridView2_DragEnter(object …推荐指数
解决办法
查看次数
拖放 - DataTransfer对象
我建立一个简单的拖N"降上传,我想知道为什么我看不到我滴在我的文件(S) console.log(e)(的dragEvent),并期待在DragEvent.dataTransfer.files它显示了空的,但是......如果我console.log(e.dataTransfer.files)是将显示已删除的文件.
//码
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", init);
function init(){
var dropbox = document.getElementById('dropbox');
dropbox.addEventListener('dragover', drag.over);
dropbox.addEventListener('drop', drag.drop);
}
var drag = {
"over": function(e){
e.preventDefault();
},
"drop": function(e){
e.preventDefault();
console.log(e); //NO FILES SHOWN
console.log(e.dataTransfer.files); //FILES in FileList Object
}
};
</script>
<style>
body{
margin: 0 !important;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
}
#dropbox{
height: 400px;
width: 400px;
align-self: center;
background-color: #0089C4;
border-radius: .3em;
border: 1px dashed black;
-webkit-box-shadow: 0px …推荐指数
解决办法
查看次数
Nestable list - 禁止将子项移出父元素
我的列表允许从子项移出子项,我想更改它.
如您所见,应允许将子项从父项内部移动到另一项父项,但不应允许在子项之外移动子项.
我认为代码太长了,所以这里是可嵌套列表,类似于我使用Luna主题的nestableList,这里是脚本jquery.nestable.js
推荐指数
解决办法
查看次数
在AngularJS移动卡中拖放Directiv
我使用这个方向:http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types
我有移动卡的问题,当我移动卡更高是好的,如果卡提供较少的问题开始.
我做了这个功能:
if ($scope.movingItem.indeksList == index) {
console.log('qrwa')
$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard +1, 1);
$scope.lists[index].cards = external[index].cards;
} else {
console.log('qrwa2')
$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard, 1);
$scope.lists[index].cards = external[index].cards;
}
如果我在同一个列表中进行移动并且我将卡移到更高的位置就可以了,那么必须执行:
$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard +1, 1);
从上到下必须执行:
$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard, 1);
这里有问题我无法获得$ index在哪个地方我放卡如果我移动卡降低使这个表演,如果更高使这个表演...
这是整个项目:https: //plnkr.co/edit/BVF0KxPrWiCeGDXVpQDV？p = preview
推荐指数
解决办法
查看次数
标签 统计
drag-and-drop ×10
javascript ×6
jquery ×3
html ×2
php ×2
ajax ×1
angularjs ×1
applet ×1
c# ×1
datagridview ×1
drag ×1
events ×1
file-upload ×1
fixed ×1
html5 ×1
macos ×1
pyqt ×1
python ×1
xcode ×1