标签: drag-and-drop

我几乎把这件事与一件令人烦恼的事情分开了......

因为ListBox选择在鼠标按下时发生,如果在选择要拖动的最后一个项目时用鼠标向下开始拖动它可以正常工作,但是如果选择要先拖动的所有项目然后单击选择以开始拖动它,您单击的那个未被选中并在拖动后留下.

有关解决这个问题的最佳方法吗？

<DockPanel LastChildFill="True">
    <ListBox ItemsSource="{Binding SourceItems}"
             SelectionMode="Multiple"
             PreviewMouseLeftButtonDown="HandleLeftButtonDown"
             PreviewMouseLeftButtonUp="HandleLeftButtonUp"
             PreviewMouseMove="HandleMouseMove"
             MultiSelectListboxDragDrop:ListBoxExtension.SelectedItemsSource="{Binding SelectedItems}"/>
    <ListBox ItemsSource="{Binding DestinationItems}"
             AllowDrop="True"
             Drop="DropOnToDestination"/>
<DockPanel>

...

public partial class Window1
{
    private bool clickedOnSourceItem;

    public Window1()
    {
        InitializeComponent();
        DataContext = new WindowViewModel();
    }

    private void DropOnToDestination(object sender, DragEventArgs e)
    {
        var viewModel = (WindowViewModel)
                            e.Data.GetData(typeof(WindowViewModel));
        viewModel.CopySelectedItems();
    }

    private void HandleLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        var sourceElement = (FrameworkElement)sender;
        var hitItem = sourceElement.InputHitTest(e.GetPosition(sourceElement))
                      as FrameworkElement;

        if(hitItem != null)
        {
            clickedOnSourceItem = true;
        }
    }

    private void …

如何创建一个列表,我可以通过将列表行拖动到另一行来重新排列列表项,依此类推(更改为订单)？

就像在时钟应用程序中的HTC Hero,您可以重新排列时钟的顺序？

我希望能够在携带文件的光标进入浏览器窗口后立即突出显示丢弃区域,就像Gmail一样.但我不能让它发挥作用,我觉得我只是错过了一些非常明显的东西.

我一直在努力做这样的事情:

this.body = $('body').get(0)
this.body.addEventListener("dragenter", this.dragenter, true)
this.body.addEventListener("dragleave", this.dragleave, true)`

但是,每当光标移过和移出除BODY之外的元素时,它都会触发事件,这是有道理的,但绝对不起作用.我可以在所有东西上面放置一个元素,覆盖整个窗口并检测到它,但这是一种可怕的方式.

我错过了什么？

我正在尝试制作一个可以通过拖放重新定位的元素列表.第一个元素Box 1在100%的时间内都能正常工作.有时第二个框可以工作,但其他框都没有按预期工作.一旦你开始拖动它们,它们似乎立即触发所有拖动事件.

如果重要的话,我正在使用最新的Chrome(第23版).

var $questionItems = $('.question-item');

$questionItems
  .on('dragstart', startDrag)
  .on('dragend', removeDropSpaces)
  .on('dragenter', toggleDropStyles)
  .on('dragleave', toggleDropStyles);


function startDrag(){
  console.log('dragging...');
  addDropSpaces();
}

function toggleDropStyles(){
  $(this).toggleClass('drag-over');
  console.log(this);
}


function addDropSpaces(){
  $questionItems.after('<div class="empty-drop-target"></div>');
  console.log('drop spaces added');
}

function removeDropSpaces(){
  $('.empty-drop-target').remove();
  console.log('drop spaces removed');
}

这是HTML:

<div class="question-item" draggable="true">Box 1: Milk was a bad choice.</div>
<div class="question-item" draggable="true">Box 2: I'm Ron Burgundy?</div>
<div class="question-item" draggable="true">Box 3: You ate the entire wheel of cheese?</div>
<div class="question-item" draggable="true">Box 4: Scotch scotch scotch</div>

这是我的代码的jsFiddle:http://jsfiddle.net/zGSpP/5/

拖动从"源"发生到"目标".当源调用带有allowedEffects的DoDragDrop()作为DragDropEffects.Copy时,我可以通过在目标(在DragOver事件中)设置Effects = DragDropEffects.None来取消放置.

但是当我将allowedEffects设置为DragDropEffects.Move时,同样的情况也会失败.

要重现这种情况,请从http://jaimersamples.members.winisp.net/samples/dragdrop/drag.zip下载示例.

更改行..(到DragDropEffects.Move)

DragDrop.DoDragDrop(this.DragSource, data, DragDropEffects.Copy);

添加行..

void Window1_DragOver(object sender, DragEventArgs args)
{
   args.Effects = DragDropEffects.None;

并注释掉整个DragSource_GiveFeedback ..

void DragSource_GiveFeedback(object sender, GiveFeedbackEventArgs e)
{
    //System.Diagnostics.Debug.WriteLine("DragSource_GiveFeedback " + e.Effects.ToString());

框架中是否存在某种错误,或者我只是看不到明显的错误？

我的代码可以让我在winforms中拖动一个无边界形式,我已经使用了几个月了,这非常有效.

但是,当我第一次给出代码时,他们this.Invalidate();在MouseMoveForm 的情况下使用了,而且Form稍微闪烁并且在拖动时很慢.所以,我在活动中取代Invalidate()了,令我惊讶的是,Form现在可以非常流畅地拖动,并且没有任何闪烁.Update()MouseMove

有人可以向我解释为什么Update使代码比Invalidate更好,即使Invalidate听起来像是正确的使用它？

谢谢 :)

PS如果我添加代码可能会有更多帮助...现在添加它.

编辑 - 这是代码:

private void titlebar_MouseDown(object sender, MouseEventArgs e)
{
    this.IsMouseDown = true;

    this.LastCursorPosition = new Point(e.X, e.Y);

    if (this.BackColor == Color.White)
    {
        this.BackColor = Color.GhostWhite;
        tbox.BackColor = Color.GhostWhite;
        tbox.ForeColor = Color.Black;
    }
    else
    {
        this.BackColor = Color.FromArgb(20, 20, 20);
        tbox.BackColor = Color.FromArgb(20, 20, 20);
        tbox.ForeColor = Color.White;
    }
}

private void titlebar_MouseMove(object sender, MouseEventArgs e)
{
    if (this.IsMouseDown == true)
    {
        //Move the form …

我有一个简单的单列,基于视图的NSTableView,其中包含可以拖动的项目以重新排序它们.在拖放过程中,我想制作它,以便在鼠标下方的位置打开待删除项目的间隙.当您拖动以重新排序曲目时,GarageBand会执行类似的操作(此处为视频:http://www.screencast.com/t/OmUVHcCNSl).据我所知,在NSTableView中没有内置的支持.

有没有其他人试图将此行为添加到NSTableView并找到了一个很好的解决方案？我已经想到并尝试了几种方法而没有取得多大成功.我的第一个想法是通过发送-noteHeightOfRowsWithIndexesChanged:我的数据源的-tableView:validateDrop:...方法,然后返回正常高度的两倍,在拖动过程中将鼠标下方行的高度加倍-tableView:heightOfRow:.不幸的是,我可以说,NSTableView在拖放期间不会更新其布局,因此尽管调用noteHeightOfRowsWithIndexesChanged:,行高度实际上并未更新.

请注意,我正在使用基于视图的NSTableView,但我的行并不复杂,以至于如果这样做有助于实现此目的,我无法移动到基于单元格的表视图.我知道在拖动完成后,为放置的项目设置间隙动画的简单内置功能.我正在寻找一种在拖拽进行过程中打开间隙的方法.此外,这是一个应用程序在Mac App Store中出售,因此它不能使用私有API.

编辑:我刚刚向Apple提交了一个增强请求,要求内置支持此行为:http://openradar.appspot.com/12662624.Dupe,如果你也想看到它.更新:我请求的增强功能是在OS X 10.9 Mavericks中实现的,现在可以使用NSTableView API实现此行为.请参阅NSTableViewDraggingDestinationFeedbackStyleGap.

我正在考虑如何在应用程序中处理我想要的这个功能.基本上,我希望我的用户能够创建自定义页面,这些页面将保存以供日后查看.但是,我希望有一个统一的结构和感觉.我也希望它无痛而且非常简单.我知道我可以使用像TinyMCE这样的东西,但有时候格式化会很痛苦.

这是我想要的小草图:

像http://www.diagram.ly/之类的东西,但是用于文本内容.理想情况下,一旦用户完成页面编辑,我只需将内容保存为XML,标签代表每种内容类型,并在呈现后相应地应用样式.

这太复杂了,还是已经存在的更简单的东西？我希望尽可能使用HTML5 ......但我愿意接受任何建议甚至其他选择!

谢谢!

我正在尝试使用HTML5实现基本的拖放功能.它在Chrome中运行完全正常,但在IE10中我收到0x8000ffff - JavaScript runtime error: Unexpected call to method or property access.错误setData.

function handleDragStart(e) {
    e.dataTransfer.effectAllowed = 'move';                                        
    e.dataTransfer.setData("dropTarget", g.destination);
}

var cols = $("#" + g.source + " tbody > tr");
[].forEach.call(cols, function (col) {
    col.addEventListener('dragstart', handleDragStart, false);
});

我究竟做错了什么？

我创建了一个小提琴来演示这个问题(也可以在下面这个问题中运行).

我有一个侧边栏的扑克牌图片,我想拖到一个主要区域.侧边栏包含很多卡片,因此我希望它可以滚动.但是,当我给它一个滚动功能时,当我拖动一张卡片时,当我将它拖出侧边栏时它会被隐藏起来.

var app = angular.module('myApp', ['ngDraggable']);

app.controller('ctrl', function ($scope) {


});

#gallery-container {
    overflow-y: scroll;
}
.card {
    width: 100%;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://rawgit.com/fatlinesofcode/ngDraggable/master/ngDraggable.js"></script>
<div ng-app="myApp">
    <div ng-controller="ctrl">
        <div class="row">
            <div class="col-xs-3">
                <div id="gallery-container">
                    <div class="row">
                        <div class="col-sm-12">
                            <img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" …