标签: draggable

我正在尝试构建一个交互式Web应用程序.使用Jquery UI,但我被困在这里 - 我似乎无法找到一种方法来"嵌套"我的"盒子"(请参阅​​小提琴演示).例如,假设有四个盒- 甲,乙,Ç,d.如果A是宽度和高度值较高的父级,我将b拖放到A中 - 这样可以正常工作.我尝试将另一个"盒子" C拖放到A中,这也很好.但是当我试图将D(或者甚至C,这无关紧要)放入B(嵌套)时,它似乎不起作用(见小提琴).

请注意,小提琴不包含单独的"Boxes",而只包含一个多次复制的框.还要注意我还没有实现排序功能(在小提琴中),因为我还没能解决嵌套问题.

JS小提琴:http://jsfiddle.net/JQwsf/

为了确保我不想在这里混淆任何人,我附上了一张图片.

任何帮助都非常感谢.谢谢.

我正在开发一个使用触摸屏界面的项目.我在一个较小的div里面有一个div,所以较小的div有滚动条来访问第一个div的其余部分.这是它的基本代码.

.div1{
      height: 100px;
      width: 100px;
}
.div2{
      height: 50px;
      width: 50px;
}

和HTML是:

<div id = "div2" class="div2">
 <div id="div1" class="div1"></div>
</div>

使用javascript,我希望能够通过按(因为它是一个触摸屏)滚动div2一个未占用的屏幕部分并沿着div拖动.基本上,滚动功能的行为与谷歌地图在您单击并拖动时的行为方式相同.任何人都可以帮我吗？提前致谢!

注意

在鼠标操作方面,按下相当于单击此处,只是为了清楚.我也只在Firefox工作,因此跨浏览器兼容性不是问题.

我需要使用jQuery UI限制可拖动对象的包含区域,但有一些额外的限制.我需要防止draggable元素与同一容器中的其他元素重叠.我需要允许在"moveInHere"区域移动而不是"butNotHere"区域.可能吗？

<div id="moveInHere">

    <div id="dragMe"> </div>

    <div id="butNotHere"> </div>

</div>


<script type="text/javascript">

    $("#dragMe").draggable({
        containment: "#moveInHere"
    });

</script>

我正在尝试创建一些可拖动的元素(标记),可以在一个可疑的div内拖动.似乎一切都在工作,除了......在我拖动一个元素然后放下它之后,我再也无法拖动它了.似乎我再也无法绑定它的dragstart事件了.

知道为什么会这样,我该如何解决？

这是我小提琴的链接:http://jsfiddle.net/gXScu/1/

HTML:

<div id="editor" contenteditable="true">
    Testime siinkohal seda, et kuidas<br />
    on võimalik asja testida.
    <span class="draggable" draggable="true" contenteditable="false">Token</span>
</div>
<span class="draggable" draggable="true" contenteditable="false">Token 2</span>

Javascript(jQuery)

var bindDraggables = function() {
    console.log('binding draggables', $('.draggable').length);
    $('.draggable').off('dragstart').on('dragstart', function(e) {
        if (!e.target.id)
            e.target.id = (new Date()).getTime();
        e.originalEvent.dataTransfer.setData('text/html', e.target.outerHTML);
        console.log('started dragging');
        $(e.target).addClass('dragged');
    }).on('click', function() {
        console.log('there was a click');
    });
}

$('#editor').on('dragover', function (e) {
    e.preventDefault();
    return false;
});

$('#editor').on('drop', function(e) {
    e.preventDefault();
    var e = e.originalEvent;
    var content …

我正在使用jquery ui draggable,并最终可以放置以便将图片重新排序到不同的盒子中.

当我将图片从包装盒中拖出时,一旦它离开其直接容器,它就会出现在所有其他元素下面.

谷歌搜索时,我能够找到添加:

   helper: 'clone',
   appendTo: "body"

这使得它被拖动出现在所有元素的顶部,但它仍然保留在框中的原始副本,我不希望这样.

有没有办法让我在拖动时让元素保持在一切的顶部？我尝试过高z-index无济于事.

这是一个jsfiddle,它显示了第二个背后的第一个draggle元素.反过来说这不是问题.我不能在不破坏很多其他事情的情况下更改包含div的相对位置.

http://jsfiddle.net/cBWhX/6/

我正在尝试在矩形的四个角上放置调整大小的手柄,可以拖动它来调整矩形的大小.我遇到的麻烦是在拖动其中一个矩形点后计算矩形的新宽度,新高度和新点.

如果矩形没有旋转,这显然是非常容易的,因为宽度和高度将改变与鼠标的offsetX和offsetY相同的大小.但是,此矩形可以旋转,因此offsetX和offsetY与宽度/高度的变化不匹配.

在上图中,我已经用纯黑色表示了我已经拥有的信息,以及我想要用浅灰色找到的信息.我试图展示如果我将a1角向上拖动到右边,矩形应该如何变化.

谁能帮我弄清楚如何计算缺失的信息？

谢谢你的帮助!非常感谢.

-

编辑:我有拖动开始,拖动移动,并拖动每个句柄上的结束回调.我当前的代码只是得到了新的点(在这个例子中,a2).不幸的是,这只是移动我们当前拖动到新位置的手柄,但显然对矩形的宽度/高度以及其他点的位置没有影响.我希望帮助找出的是如何根据这种阻力计算新的宽度和高度,以及其他点的新位置.

处理坐标(拖动前)

handles: { 
  a: { x: 11, y: 31 },
  b: { x: 44, y: 12 }, 
  c: { x: 39, y: 2 }, 
  d: { x: 6, y: 21 }
};

回调:

// Save the original x and original y coordinates
// of the handle, before dragging
onDragStart: function(x, y, handle) {
  handle.data({
   ox: x,
   oy: y
  });
}

// While dragging the handle, update it's coordinates to 
// reflect its new …

我目前正在开发的拖放系统存在一个问题。

我:hover在div上有一种样式，用户可以在上面放置一些东西。当我只是将鼠标悬停在它上面时，它就起作用了，但是当我拖动一个元素时，它就没有作用。

有没有变通办法即使在拖动时也能显示该样式？

$(document).on('dragstart','#draggable',function(e){
  e.originalEvent.dataTransfer.setData("data",$(this).attr('data-text'));
});

$(document).on('drop','#droppable',function(e){
	console.log(e.originalEvent.dataTransfer.getData("data"));
});

$(document).on('dragover','#droppable',function(e){
  e.preventDefault();
});

div{
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-family: Arial
}
    
#droppable{
  border: 2px solid green;
}

#droppable:hover{
  background-color: rgba(0,0,0,0.2);
}
    
#draggable{
  border: 2px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="droppable">Hover me !</div>
<div id="draggable" draggable="true" data-text="I exist too ! :(">Drag me !</div>

我正在使用draggableScrollableSheet. 我给这些参数

DraggableScrollableSheet(initialChildSize: 0.4,maxChildSize: 1,minChildSize: 0.4,builder: (BuildContext context, ScrollController scrollController) {
            return SingleChildScrollView(controller: scrollController,
              child: Theme(
                data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
                child: Opacity(
                  opacity: 1,
                  child: IntrinsicHeight(
                      child: Column(mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          SizedBox(height: 10,),
                          Container(
                            margin: EdgeInsets.only(right: 300),
                            decoration: BoxDecoration(
                              border: Border(
                                top: BorderSide(
                                    color: Colors.blue,
                                    width: 3,
                                    style: BorderStyle.solid),
                              ),
                            ),
                          ),
                          Card(
                            child: Row(
                              children: <Widget>[
                                Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Column(
                                    crossAxisAlignment:
                                    CrossAxisAlignment.start,
                                    children: <Widget>[
                                      Text(
                                        S
                                            .of(context)
                                            .we_have_found_you_a_driver,
                                        style: TextStyle(
                                            color: Colors.black,
                                            fontWeight: FontWeight.bold), …

我想在单击或拖动它时将一个可拖动的框带到前面。

我事先不知道此类框的最大数量，因为我有一个按钮，当用户单击该按钮时，该按钮会创建一个新的可拖动框。

无论有多少个框，按钮都应该始终位于顶部，因此它的 z-index 应始终是最大的。

所以这些是我的问题：

1. 当用户单击某个框时，如何将其置于最前面。
2. 如何让按钮保持在前面。

我是 ReactJS 的新手。

这是我目前在 MyComponent.js 中拥有的内容

import React, { useState }  from 'react';
import Draggable from 'react-draggable';

function MyComponent() {
    const [currZIndex, setZIndex] = useState(0);

    const bringForward = () => {
        setZIndex(currZIndex + 1);
    }

    return (
        <Draggable onMouseDown={bringForward}>
            <div className="mydiv" style={{zIndex: currZIndex}}></div>
        </Draggable>
    );
}

我当前实现的问题是每个组件只知道自己的 z-index，但不知道当前最高的 z-index 是多少。每当我单击任何 div 时，z 索引就会增加，因此这使得 z 索引不必要地变大。

如果 div1 的 z-index 为 6，div2 的 z-index 为 2，我必须单击 div2 5 次，使其 z-index 变为 7，才能将 div2 …