标签: draggable

当我将一个元素拖到另一个div我有鼠标悬停事件的元素上时,该事件不会触发.但是,如果我将鼠标悬停在它上面而不拖动它就可以了.

有没有办法检测元素上的悬停事件,如果我在其上拖动另一个？

是否可以使Angular Material Dialog可拖动？我安装了angular2-draggable,当然可以使用所有其他元素的功能.

但是因为对话框是动态创建的,所以我不能在特殊元素上使用ngDraggable,或者可以使用模板变量.

我正在尝试制作一个可以通过拖放重新定位的元素列表.第一个元素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/

是否有可能使<button>(<input type="button">)在HTML中拖放Mozilla Firefox(同时仍然可以点击)？

以下代码片段适用于谷歌浏览器,但按钮和div按钮无法拖动Mozilla Firefox(除非Alt按下按键,不知道移动设备):

document.getElementById("myDiv").addEventListener(
  "dragstart",
  function (e) {
    e.dataTransfer.setData("Text", "myDiv")
  }
);

document.getElementById("myButton").addEventListener(
  "dragstart",
  function (e) {
    e.dataTransfer.setData("Text", "myButton")
  }
);

document.getElementById("myDivWithButton").addEventListener(
  "dragstart",
  function (e) {
    e.dataTransfer.setData("Text", "myDivWithButton")
  }
);

<div id="myDiv" draggable="true">Div</div>
<button id="myButton" draggable="true">Button</button>
<div id="myDivWithButton" draggable="true"><button>Div with Button</button></div>

我用draggable="true"和dataTransfer.setData,是不是我错过了什么？有一些明智的解决方法吗？

(如果你想知道我需要什么:我有一些东西可以拖动到某个位置或设置在默认位置[当前视图的中心],我的想法是通过按钮[d&d→选择两者]位置,单击→默认位置].我知道我想我可以尝试格式化<div>,使其看起来像一个<button>或简单地将控件分成两个元素,但我宁愿不.)

我希望能够创建我想要拖动的元素的副本.即时通讯使用标准的ui draggable和droppable.我知道帮助克隆选项.但这不会创建副本.拖动的项目将恢复到原始位置.

编辑:这是一个链接,向您展示我的示例代码:http://www.singingeels.com/jqtest/

我有一个非常简单的页面,它引用了jquery-1.3.2.js,ui.core.js(最新版本)和ui.draggable.js(也是最新版本).

我有一个div,我可以很容易地拖动(当然使用鼠标):

<div id="myDiv">hello</div>

然后在JavaScript中:

$("#myDiv").draggable();

这是完美的.但是,我需要能够仅使用代码来模拟"拖放".我主要使用它,但问题是触发的事件是占位符事件.

如果你打开"ui.core.js"并滚动到底部......你会看到:

// These are placeholder methods, to be overriden by extending plugin
_mouseStart: function(event) { },
_mouseDrag: function(event) { },
_mouseStop: function(event) { },
_mouseCapture: function(event) { return true; }

为什么在我的模拟中没有正确地扩展事件,但是当你用鼠标点击它们时,它们是？ - 关于如何强制_mouseDrag:属性服从"ui.draggable.js"中的覆盖扩展的任何想法？

解决这个问题将是巨大的 - 我计划在以后展示主要的好处.

谢谢,-Timothy

编辑:这是一个链接,向您展示我的示例代码:http://www.singingeels.com/jqtest/

编辑2:点击上面的链接和查看源...你会看到我正在尝试做什么.这是一个片段:

$(document).ready(function() {
    var myDiv = $("#myDiv");

    myDiv.draggable();

    // This will set enough properties to simulate valid mouse options.
    $.ui.mouse.options = $.ui.mouse.defaults;

    var divOffset = myDiv.offset(); …

如何使用jQuery创建一个元素,例如div,draggable？

我最近使用JQuery Draggable和Resizable插件遇到了一些麻烦.寻找解决方案,我在许多不同的地方发现了一些非常零碎的代码,最后归结为一个干净的解决方案,这似乎对我来说几乎是完美的.

我以为我会和其他人分享我的发现,如果他们也遇到过这个问题.

我有一个包含和IFrame的div.这个div必须是可调整大小和可拖动的.足够简单 - 将jquery draggable和resizable添加到div中,如下所示:

$("#Div").draggable();
$("#Div").resizable();

一切都很好,直到您拖动包含iframe的另一个div或尝试通过移动当前的iframe来调整当前div的大小.通过iframe时,这两个函数都会停止.

解:

$("#Div").draggable({
    start: function () {
        $(".AllContainerDivs").each(function (index, element) {
        var d = $('<div class="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
        $(element).append(d);});
    },
    stop: function () {
        $('.iframeCover').remove();
    }
});



$("#Div").resizable({
    start: function () {
        $(".AllContainerDivs").each(function (index, element) {
            var d = $('<div class="iframeCover" style="z-index:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
            $(element).append(d);
        });
    },
    stop: function () {
        $('.iframeCover').remove();
    }
});

请享用!

PS:创建窗口的一些额外代码,当被选中时,被带到其他可拖动的前面:

在可拖动的启动功能中 -

var maxZ = 1;
$(".AllContainerDivs").each(function (index, element) { …

我正在尝试建立一个网站,用户可以将一些项目(div中的一个项目)拖动到页面上的其他div.它不是一张桌子左右,只是在页面的某个地方划分.

使用html5拖放它运行良好,现在我尝试为移动设备执行此操作.我可以将项目拖动到div,将它们放在那里并阻止这个dropzone,因为只有一个元素应该在dropzone中.我也可以将这个元素拖到另一个div或页面上的其他地方(如果我犯了一个错误,可放置区域只能在第一次删除div时工作)但是我不能在div中删除另一个现在为空的项目再次.

如何再次启用Dropzone？

如果一个被拖到另一个div上,是否有可能改变两个div的位置？

这是我的代码的相关部分:

<script type="text/javascript">
$ (init);
function init() {
    $(".dragzones").draggable({
        start: handleDragStart,
        cursor: 'move',
        revert: "invalid",
    });
    $(".dropzones").droppable({
        drop: handleDropEvent,
        tolerance: "touch",              
    });
}
function handleDragStart (event, ui) {}       
function handleDropEvent (event, ui) {
    $(this).droppable('disable');
    ui.draggable.position({of: $(this), my: 'left top', at: 'left top'});
    ui.draggable.draggable('option', 'revert', "invalid");
}
</script>
<body>
<div id="alles">
<div class="dropzones" id="zone1"><div class="dragzones" id="drag1">Item 1</div></div>
<div class="dropzones" id="zone2"><div class="dragzones" id="drag2">Item 2</div></div>
<div class="dropzones" id="zone3"><div class="dragzones" id="drag3">Item 3</div></div>
<div class="dropzones" id="zone4"><div class="dragzones" id="drag4">Item 4</div></div>
    <div class="dropzones" …

我draggable = "true"在我的网页上的某些div上使用HTML5属性.我想要它,以便当您将其中一个项目拖动到页面底部时,它会向下滚动页面,当您将其拖动到顶部时,它会向上滚动页面.

我最终会在侧边栏上创建一个播放列表,因为根据您在页面上的位置,它不会一直在视图中,当您拖动时页面需要滚动.

我的页面在这里,您可以尝试拖动帖子的图片.在Chrome上,当我拖到底部时,它会自动向下滚动,但不会向上滚动.在Firefox上,它不会自动让我滚动任何方向.有帮助吗？

这是一个简单的jsfiddle,可以帮助您入门.在Chrome上,您应该可以向下拖动谷歌图标,让它向下滚动页面,但不会向上滚动.