标签: draggable

我在网上搜索了可拖动的Swing组件的例子,但我发现了不完整或不工作的例子.

我需要的是一个Swing组件,可以通过鼠标在其他组件内拖动.在被拖动时,它应该已经改变了它的位置,而不仅仅是"跳"到目的地.

我希望能够在没有非标准API的情况下工作的示例.

谢谢.

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

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

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

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

我正在使用JavaScript并尝试对div进行偏斜效果.

首先,看看这个视频:http://www.youtube.com/watch？v = yy8Uy81smpE(0:40-0:60应该就够了).移动窗口时,视频显示了一些不错的变换(倾斜).我想要做的是同样的事情:当我移动它时扭曲div.

目前我只有一个简单的div:

<div id="a" style="background: #0f0; position: absolute; left: 0px; top: 0px;"></div>

我使用CSS3的transform属性做了一个简单的偏斜变换,但是我的实现是错误的.有没有很好的教程或数学网站或资源来描述这背后的逻辑？如果我只知道逻辑和数学,我知道JavaScript和CSS足以实现.我试过阅读FreeWins源代码,但我不擅长C.

我接受任何足智多谋的答案或伪代码.我的拖动系统是一个更大的系统的一部分,因此,现在我发布了一些真正的代码,如果没有给你整个系统它是不行的(我现在不能做).因此,您无法按原样运行此代码.我使用的代码是这个(虽然略有修改),以证明我的想法:

/**
 * The draggable object.
 */
Draggable = function(targetElement, options) {
    this.targetElement = targetElement;

    // Initialize drag data.
    this.dragData = {
        startX: null,
        startY: null,
        lastX: null,
        lastY: null,
        offsetX: null,
        offsetY: null,
        lastTime: null,
        occuring: false
    };

    // Set the cursor style.
    targetElement.style.cursor = 'move';

    // The element to move.
    this.applyTo = options.applyTo || targetElement; …

我正在更新/调试和扩展我的可拖动脚本的功能,我需要能够实现以下结果:

whatever.onRightMouseButtonMousedown = preventDefault();

我做了很多研究无济于事,但是,我知道有可能这样做,因为当我使用jquery-ui draggable时,它会阻止你用鼠标右键拖动时拖动元素的能力.我想模仿这种能力,并了解它是如何工作的,这样我就可以根据需要现在和将来实施它.

注意:请不要向我提供有关如何使用jquery或jquery-ui draggable的信息(我已经熟悉它),我想了解它们是如何实现的,或者如何实现对mousedown的检测是否正确鼠标按钮,以便我可以用鼠标右键阻止元素被拖动.

我想使用自己的jQuery代码拖动div.

当鼠标移动缓慢时,这个关于jsfiddle的例子工作得很好

http://jsfiddle.net/craic/kr7Un/

但是任何快速移动都会将鼠标拉出盒子并且跟踪丢失.

jQuery UI draggable没有这个问题,无论你移动的速度如何,跟踪都很好:http://jqueryui.com/demos/draggable/

但我想推出我自己的简单版本,以便我可以将它与Raphael,按键等集成.我已经看过jQuery UI可拖动的源代码,但对我来说,这是非常难以理解的(800行).

我不认为这是事件冒泡的问题......任何想法？

我有一个div嵌套在另一个div中,用于显示设置控制台.嵌套div有一个固定位于父级内部,如下所示:

我想为子div的左边框添加一个可拖动的句柄,以便可以在宽度上调整子div的大小.我是否需要添加另一个非常窄的div,左边框位于此处,以便可以拖动它并重新计算位置以动态调整子divs width属性的大小？

如果可能的话,我宁愿坚持使用vanilla JQuery,而不是依赖于JQuery UI.

请帮忙解决这个问题.目前我有一个div,它是可拖动的,里面的文本是可编辑的.在这里,用户可以使用输入类型范围更改文本大小.

是否可以隐藏文字画布的字母,以便字母超出图像画布div的边界并到达col-sm-8？

这里当用户没有空格地写文本时,那个词就超出了col-sm-8.怎么解决这个？我用overflow:hidden和word-wrap:breakdown,但它不工作.

function submit_button() {
  /* ....Image upload function.. */
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});

.text-canvas {
  z-index: 1;
  position: absolute;
}
.imageupload {
  z-index: -1;
} …

我正在寻找一种使用jQueryUI draggable插件模拟阻力的方法(类似于此效果).在可拖动文档的底部,它提到:

"要在拖动过程中操纵可拖动的位置,您可以使用包装器作为可拖动的帮助器,并使用绝对定位来定位包裹的元素,或者您可以更正内部值,如下所示:$(this).data('draggable') .offset.click.top - = x".

几何不是我强大的西装我正在寻找帮助,如何在拖动东西时最好地达到阻力的效果.我认为使用上面的这个提示,我可以使用几何函数更改可拖动移动的距离.我不确定最好的术语是阻力还是弹性,但我正在寻找一种感觉,好像一个元素通过橡皮筋或蹦极绳附着在一个点上,这样你拖得越远,物体移动的越少.

例如,假设我想拖动一个对象的总距离为500像素(在任何方向上).我希望阻力效应增加距离我得到的起点更近的500像素.我环顾四周,没见过这样的东西.

更新:

我创建了一个基本的jsFiddle来计算项目被拖动的距离http://jsfiddle.net/Z8m4B/

计算如下:

var x1=x2=y1=y2=0;
$("#draggable").draggable({
    start: function(e, ui) {
        y1 = ui.position.top;
        x1 = ui.position.left;
    },
    stop: function(e, ui) {
        y2 = ui.position.top;
        x2 = ui.position.left;        
        dist = parseInt(Math.sqrt(Math.pow((x2-x1),2)+Math.pow((y2-y1),2)), 10);
        console.log(dist);
    }
});

显然我想在拖动事件期间改变距离而不是停止.有谁知道如何创建这种阻力或拉伸效果的功能？

我经常搜索一下jQuery的拖放教程(没有UI),但由于JQuery UI的普及,所有的拖放功能都基于JQuery UI.

任何人都可以给我一个提示如何通过JQuery独立进行基本的拖放操作？

我只是尝试将HTML5 draggable ='false'属性应用于某些图像,但它在Firefox浏览器中不起作用.在Chrome中工作正常但在Firefox上,选择了能够拖放的图像.示例代码可以在这里看到:

<div id="dnd">
    <textarea placeholder="drop here"></textarea>
    <img src="http://johnlewis.scene7.com/is/image/JohnLewis/231108668?$prod_main$" draggable='false'/>
</div>

的jsfiddle

我有Firefox最新版本:32.0.3

谷歌很多,但没有找到更好的解决方案.有没有使用JavaScript的解决方案？任何帮助,将不胜感激.

谢谢