草庐IT

javascript - html5,从组中的对象开始拖动

UpdatedWorkingFiddle原始问题我想知道为什么在这段代码中我无法从圆圈中收到带有“dragstart”的消息...拖动时我无法收到消息“圆圈”。我尝试过,使用来自http://www.html5canvastutorials.com的一些工作代码.在此代码中:http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/,这是工作。jsfiddle:http://jsfiddle.net/zoutepopcorn/YXJpH/UntitledDoc

javascript - jQuery 可拖动可滚动容器

我目前有一个简单的可拖动列表,我希望它位于div(元素)内并且可滚动。$(".draggable").draggable();我现在有这个fiddle:http://jsfiddle.net/YvJhE/660/但如您所见,可拖动元素保留在元素容器内,我希望它们能够拖出,但也希望能够在元素容器内滚动,只要有更多元素,比容器长是。任何人都可以让我走上正轨吗? 最佳答案 jQuery使用可以附加到另一个DOM元素的辅助对象来处理此类交互:$(".draggable").draggable({helper:'clone',appendTo

javascript - 将固定的可拖动 div 居中

我有一个fixeddiv,我试图将其垂直和水平居中。是的,我知道有许多的问题和教程来执行此操作。我检查并按照说明进行操作。这是我实现的一个:#draggable{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);}现在,我还希望div可以拖动。所以它应该从屏幕中央开始,然后用户可以选择拖动它。问题是,当您开始拖动它时,div突然向上移动。如何让固定的、可拖动的div居中?JSFiddle$('#draggable').draggable();body{width:2000px;height:2000px;bac

jquery - 将可拖动的 div 与 jqueryUI 可排序和 Bootstrap 一起使用(光标与 col-xs-6 中的 div 保持距离)

我想用jqueryUI和bootstrap制作一个可拖动的div,就像这样fiddle但是当我想在最后拖动第三个div时,它需要与光标的距离。$(function(){$(".columns").sortable({});}); 最佳答案 我想你可以使用cursorAt:{left:Value,top:Value}来设置你的鼠标位置 关于jquery-将可拖动的div与jqueryUI可排序和Bootstrap一起使用(光标与col-xs-6中的div保持距离),我们在StackOver

jquery - 拖动链接以使用 Jquery 动态创建文本框

伙计们,我有一个包含2个DIV标签和一个提交按钮的HTML文件,如下所示Textbox我想要的是,如果我将一个链接(文本框)从菜单DIV拖到容器DIV,我需要在容器DIV中动态创建一个文本框。稍后我需要从提交按钮获取文本框值,有没有关于如何使用Jquery实现此目的的想法或来源? 最佳答案 这是你需要的:http://jsfiddle.net/zSUJF/18/ 关于jquery-拖动链接以使用Jquery动态创建文本框,我们在StackOverflow上找到一个类似的问题:

javascript - HTML 5 拖动事件

我正在尝试用JS和HTML构建一个可重新排序的列表。(尝试在不使用jQueryui的情况下执行此操作)我似乎无法弄清楚为什么在拖动列表项时只有dragstart和dragend事件会触发。有人知道为什么其他事件没有触发吗?1111111222222333333444444vardrags=document.querySelectorAll('.drag');[].forEach.call(drags,function(drag){drag.addEventListener('dragstart',handleDragStart,false);drag.addEventListener(

javascript - 像在 photoshop 中一样使用可拖动的 handle 倾斜图像

我正在尝试像我们在photoshop中使用html5canvas那样扭曲图像。我可以对右上handle和左下handle使用倾斜,但不幸的是无法像下面的代码那样在其他两个handle上应用倾斜:HTML:Javascript(JQuery):$(document).ready(function(){varuid=0;jQuery.fn.extend({skew:function(){uid++;this.attr("style","position:relative");varparent=this;varimage=this.find("img");varcanvas=createC

javascript - 定位并拖动应用了变换的元素

我有一个非常适合拖动对象的javascript代码......但是当我将主体缩小到0.5时......transform:scale(0.5);鼠标和拖动对象的位置不一样。我怎样才能解决这个问题?或者这可能吗?...谢谢。这是一个fiddle:http://jsfiddle.net/Xcb8d/65/ 最佳答案 这非常有趣,让我重新思考我只是使用offsetHeight和offsetWidth的所有位置,而不知道如果对元素应用转换,JavaScript中的这些只读属性将返回错误。“技巧”是clientHeight/offsetHei

javascript - 如何在 reactjs 拖动事件中隐藏重影图像?

我在Reactjs中使用onDrag方法。我想在拖动图像时发生拖动,但我不想显示重影图像。我使用了css“-webkit-user-drag:none”,但它完全阻止了拖动功能。我希望两者同时工作。示例代码, 最佳答案 首先创建一个smalltransparentimage在componentDidMount中:componentDidMount(){this.dragImg=newImage(0,0);this.dragImg.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///

javascript - 如何禁用触摸输入范围仅接受拖动以更改其值?

我有一个HTML输入作为range的类型。用户可以通过拖动拇指来改变它的值。但是用户也可以通过触摸直接将拇指带到那里的轨道区域来改变它的值。如何禁用触摸更改值并仅启用拖动?如果拇指在“0”位置,用户可以触摸输入的中间,将拇指移动50左右。我想禁用用户在输入轨道上的触摸,只允许用户将拇指拖动到改变它的值(value)。 最佳答案 如果我理解正确,那么您可能正在寻找的是:input[type=range]{pointer-events:none;}input[type=range]::-webkit-slider-thumb{point