标签: drag-and-drop

我想使用AngularJS创建嵌套的可排序列表.我不确定那里有现成的解决方案.我尝试使用https://github.com/mostr/angular-ui-multi-sortable,它工作正常,但不幸的是,似乎它不接受嵌套列表.

我真正需要的是拥有多个篮子,我可以对这些篮子进行重新排序,还可以从篮子中拖放产品(从一个篮子到另一个篮子).

有没有人有想法/解决方案如何使用它？

谢谢!

我正在尝试开发一个具有以下功能的页面：

Page将有两列：一列是#origin（左列），其中包含矩形列表（代表变量），第二列是#drop（右列），其中包含可放置矩形的输入。

为了得到我想要的结果，我想到了使用两个插件：jQuery ui draggable和jQuery Tokeninput

问题是，一旦将矩形（<li>）放到输入字段中后，如何使它显示为标记。也可以使用相同的<li>元素，因此我可以在输入中输入更多文本（以完成一个公式），如果以后用户改变主意并确定变量（标记）不是他所使用的那个，还是她想要的，页面应允许他们删除标签（通过单击右上角的“ X”或将标签返回到其左列的原始位置）

有人已经做过类似的事情并且可以给我一些指导吗？还是有人对此有其他想法？

任何帮助是极大的赞赏。

PS：如果您知道其他任何可以在同一输入中组合文本和标签的标签插件，请告诉我。

所以我正在尝试创建一个文件管理器Web应用程序.现在,用户可以在屏幕上删除文件,我可以读取它们,包括删除的目录中的所有文件.但是,我不知道脚本何时完成读取文件.

一些代码:

第一个函数处理'drop'事件,并循环遍历每个文件并将其发送到另一个将读取其内容的函数.

function readDrop( evt )
{
    for( var i = 0; i < evt.dataTransfer.files.length; i++)
    {
        var entry = evt.dataTransfer.items[i].webkitGetAsEntry();

        if(entry)
            readContents(entry, "");
    }

    //Do stuff after all files and directories have been read.
}

此函数是递归FileEntry读取器.如果是文件,我会读取FileEntry.如果它是一个目录,它将循环遍历内容并通过该函数传递它.

function readContents(entry, path)
{
    if( entry.isFile )
    {
        readFileData( entry, path, function(fileData)
        {
            _MyFiles.push( fileData );
        });
    }
    else if( entry.isDirectory )
    {
        var directoryReader = entry.createReader();
        var path = path + entry.name;

        directoryReader.readEntries(function(results)
        {
            for( var j = 0; j < …

我希望允许用户按照自己喜欢的方式安排treeView的节点,但是我遇到了很多问题.例如:

• 在我做了一些拖放后,树视图停止响应,我必须杀死应用程序.此外,如果我开始拖动并放弃(按取消,或从我挑选它的地方放回)应用程序挂起...我不能做任何事情
• 如果用户想要重新排列作为同一主节点的子节点的3个节点的顺序,则他不能像在其他应用程序中那样执行它.为什么？是否有任何方法允许用户在BETWEEN 2其他节点中删除他的节点？Delphi似乎允许用户只在另一个上面点头.

这不好.我想要像这张照片中的行为

因此Node3的目的地应该在Node1和Node2之间.当然,节点的ON TOP应该是可用的,但是这个BETWEEN NODES功能也应该可用.

到目前为止我的代码是:

procedure TForm3.FormCreate(Sender: TObject);
begin
  tv.FullExpand;
end;

procedure TForm3.tvDragDrop(Sender, Source: TObject; X, Y: Integer);
var
  TargetNode, SourceNode : TTreeNode;
begin
  with TV do
  begin
    TargetNode := GetNodeAt(X,Y); // Get target node
    SourceNode := Selected;
    if (TargetNode = nil) then
    begin
      EndDrag(False);
      Exit;
    end;
    MoveNode(TargetNode,SourceNode);
    SourceNode.Free;
  end;
end;

procedure TForm3.tvDragOver(Sender, Source: TObject; X, Y: Integer;
  State: TDragState; var Accept: Boolean);
begin
  if (Sender = TV) then // If TRUE than accept the draged …

我已经使用HTML 5成功实现了Web应用程序的拖放文件上传.我监听drop事件,然后从event.dataTransfer属性中获取文件数据.

对于所有意图和目的,它的工作原理与dropzone.js完全相同:

http://www.dropzonejs.com/

但是,出于某种原因,我无法从Chrome下载栏拖放文件.

dragenter,dragover和dragleave事件触发,但没有掉落事件触发.这可以使用dropzone.js演示网站可靠地重现.

为什么？

Hy,我是KendoUI的新手,我试图通过拖放重新排序listView.我注意到listVIew插件在其CORE中没有可拖动的功能,所以我试图从Kendo Framework添加可拖动的操作,但我甚至不是很接近.

是否可以使用拖放重新排序listView项目？

Kendolistview和Kendo Drag

我注意到一个KendoUI插件确实有这个功能:

TreeView演示

PS:非常欢迎演示或类似的东西.

我可以拖动我的注释,当我放下它时,我可以读取位置.但是,我需要不断更新我的标题与我拖动的位置.我尝试添加UIPanGestureRecognizer但是在拖动注释时不起作用.在拖动注释时,我应该使用什么方法来不断回调我的代码？

-(void)mapView:(MKMapView *)mapView annotationView:(MKAnnotationView *)view
                didChangeDragState:(MKAnnotationViewDragState)newState
                fromOldState:(MKAnnotationViewDragState)oldState {

CLLocationCoordinate2D annoCoord = view.annotation.coordinate;

switch (newState) {
    case MKAnnotationViewDragStateStarting:
        NSLog(@"Start dragging annotation");
        break;

    case MKAnnotationViewDragStateDragging:
        NSLog(@"Dragging annotation");
        break;

    case MKAnnotationViewDragStateEnding:
        [view setDragState:MKAnnotationViewDragStateNone]; // must be here! else multiple calls
        NSLog(@"Ending dragging annotation at %f : %f", annoCoord.latitude, annoCoord.longitude);
        break;

    case MKAnnotationViewDragStateCanceling:
        NSLog(@"Cancel dragging annotation");
        break;

    case MKAnnotationViewDragStateNone:
        NSLog(@"None dragging annotation");
        break;
    default:
        break;
    }

}

我只在州开始时获得回调,而不是在拖动期间.

任何帮助将非常感激.

干杯,tord

我有一个ttk Treeview(在Tk中的一个Frame中)和一个tk Listbox(在Toplevel中).我的意图是做以下事情:

1. 在Treeview中按鼠标按钮1
2. 将(按下的)鼠标移动到列表框
3. 鼠标进入时,将焦点设置为包含列表框的Toplevel

现在,当未按下的鼠标进入时,我可以设置Toplevel的焦点.我用过.bind("<Enter>").

当我使用时,.bind("<B1-Motion>")我可以检测到按下鼠标的动作.但只有我在列表中按下鼠标.

当我使用时,.bind("<B1-Enter>")我没有得到任何事件.

如何检测其他按下的鼠标是否进入我的列表框？

我的js文件中有以下代码

window.onload = function () {

    var canvas = document.getElementById('canvas');
    canvas.addEventListener('dragover', drag_over, false);
    canvas.addEventListener('dragenter', drag_over, false);
    canvas.addEventListener('drop', dropped, false);
}

在某些时候,我创建了一个像这样的可拖动元素

element.addEventListener('dragstart', dragstart, false);

我有这样的回调:

function dragstart(e) {
    console.log("dragstart");
}

function dropped(e) {
    console.log("dropped");
 }
function drag_over(e) {
    console.log("dragover");
    e.preventDefault();
    return false;
}

问题是代码在chrome中运行良好但在firefox中运行不正常.在firefox中,dragstart回调被触发但不是其余的.无能:(

我正在尝试实现拖放操作以在文章计划系统中更改日期。我希望用户能够将文章条目从一个日期拖到另一个日期，然后应自动更新时间表。这是我的代码：

<script type="text/javascript">
    $(function () {
        $(".scheduledArticleRow").draggable({
            cursor: "move",
            cursorAt: { top: -12, left: -20 },
            opacity: 0.5,
            helper: function (event) {
                return $("<div class='ui-widget-header'>" + $(this).data('title') + "</div>")
            }
        });
        $(".articleNeededRow").droppable();
        $(".reservedDateRow").droppable();

        $(".scheduledArticleRow").off("dragstart").on("dragstart", function (e) {
            console.log("dragstart");
            e.dataTransfer.setData("articleId", $(this).data("articleId"));    // Uncaught TypeError: Cannot call method 'setData' of undefined 
            e.dataTransfer.setData("oldDate", $(this).data("date"));        // Uncaught TypeError: Cannot call method 'setData' of undefined
            e.originalEvent.dataTransfer.setData("articleId", $(this).data("articleId"));    // Uncaught TypeError: Cannot call method 'setData' of undefined 
            e.originalEvent.dataTransfer.setData("oldDate", $(this).data("date"));            // Uncaught TypeError: Cannot call method 'setData' …