blocks|key|1696838|text|我认为一个好的起点可能是规划出流程，然后决定您需要为每个用户操作使用哪些jQuery工具。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1696839|因此，用户进程可能是：|1696840|1696841|点击你的内容div上的一个"draggable“区域|unordered-list-item|1696842|拖动内容，这会将内容保留在该div中|1696843|松开鼠标，这会将内容放入一个"+droppable”容器中，它会调整前一个内容的大小以适应可拖放的大小|1696844|1696845|它需要以下类型的事件监听器：|1696846|1696847|mouseup|1696848|mousedown|1696849|animate|1696850|1696851|至少。另一种选择可能是查看jQuery+UI源代码，看看他们是如何做到的！它将确切地告诉您要做什么，但您可以在必要时添加或修剪它。|1696852|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|12|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|G|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|G|7|15|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|18|8|@]|9|@]|A|$]]|$1|P|3|Q|5|G|7|19|8|@]|9|@]|A|$]]|$1|R|3|S|5|G|7|1A|8|@]|9|@]|A|$]]|$1|T|3|U|5|G|7|1B|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1D|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|Z|$]]

<p>I think a good starting place might be to map out the process, and then decide which jQuery tools you will need to use for each user action.</p>

<p>so the user process might be:</p>

<ul>
<li>Click on your content div on a "draggable" area</li>
<li>Drag the content, which will keep the content inside that div</li>
<li>release the mouse, which will put the content into a "droppable" container, which will adjust the size of the previous content to fit the droppable size</li>
</ul>

<p>which needs the following types of event listeners:</p>

<ul>
<li>mouseup</li>
<li>mousedown</li>
<li>animate</li>
</ul>

<p>At the very least. Another option might be to check out the jQuery UI source, and see how they do it! Which will tell you exactly what to do but you can add to it or trim where necessary.</p>


blocks|key|1696810|text|您可以使用以下几个插件来查看以下内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1696811|http://wayfarerweb.com/jquery/plugins/animadrag/|offset|length|1696812|http://threedubmedia.com/code/event/drag/demo/|1696813|它仍然是jquery，但没有UI|1696814|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|1C|0|0|0|1A|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|H|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]|Q|$5|M|N|O|A|$P|G]]]]

<p>There are several plugins that you may use take a look at the following </p>

<p><a href="http://wayfarerweb.com/jquery/plugins/animadrag/" rel="nofollow noreferrer">http://wayfarerweb.com/jquery/plugins/animadrag/</a></p>

<p><a href="http://threedubmedia.com/code/event/drag/demo/" rel="nofollow noreferrer">http://threedubmedia.com/code/event/drag/demo/</a></p>

<p>it still jquery but no UI</p>


blocks|key|4925299|text|http://thezillion.wordpress.com/2012/09/27/javascript-draggable-2-no-jquery|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4925300|看看这个。它是核心JS，易于实现。|4925301|entityMap|0|LINK|mutability|MUTABLE|url^0|0|23|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@$A|N|B|O|1|P]]|C|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|4]]]]

<p><a href="http://thezillion.wordpress.com/2012/09/27/javascript-draggable-2-no-jquery" rel="nofollow">http://thezillion.wordpress.com/2012/09/27/javascript-draggable-2-no-jquery</a></p>

<p>See this. It's core JS and easy to implement.</p>


blocks|key|676021|text|我发现这个非常有用：http://draggabilly.desandro.com/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|676022|entityMap|0|LINK|mutability|MUTABLE|url|http://draggabilly.desandro.com/^0|A|W|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>I found this one very useful:
<a href="http://draggabilly.desandro.com/" rel="nofollow">http://draggabilly.desandro.com/</a></p>


blocks|key|888011|text|遇到了同样的问题，对于我需要的有限功能来说，对于只有draggable和droppable的精简jqueryUI来说，33.4KB太大了。下面的方法不是工作代码-它只是一个简单的结构来可视化需要发生的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|888012|$('.draggable').on{
++mousemove+:+function(){
++++var+mouseposition+=+{+//+this+also+needs+to+account+for+onclick+offset+of+pointer+vis-a-vis+element
++++++++x+:+pageX,
++++++++y+:+pageY+
++++};
++++$(this).css({
++++++top+:+mouseposition.y,
++++++left+:+mouseposition.y
++++});
++if(+//+this+statement+is+kinda+bogus,+idea+is+to+perform+a+collision+detection+via+coordinate+comparison
++++$('.draggable').offset().top+<+$(.droppable').offset().top+
++++&&
++++$('.draggable').offset().left+<+$(.droppable').offset().left
++)+{
++++++alert('the+item+has+been+dropped');
++}
++}
});|code-block|syntax|javascript|888013|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Came across the same problem, and 33.4 kilobytes for the minified jqueryUI with only draggable and droppable is too large for the limited functionality I needed. The approach below isn't working code - it's just a simple structure to visualize what needs to happen.</p>

<pre><code>$('.draggable').on{
  mousemove : function(){
    var mouseposition = { // this also needs to account for onclick offset of pointer vis-a-vis element
        x : pageX,
        y : pageY 
    };
    $(this).css({
      top : mouseposition.y,
      left : mouseposition.y
    });
  if( // this statement is kinda bogus, idea is to perform a collision detection via coordinate comparison
    $('.draggable').offset().top &lt; $(.droppable').offset().top 
    &amp;&amp;
    $('.draggable').offset().left &lt; $(.droppable').offset().left
  ) {
      alert('the item has been dropped');
  }
  }
});
</code></pre>


blocks|key|888073|text|答案基于：https://www.sanwebe.com/2014/10/draggable-element-with-jquery-no-jquery-ui|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|888074|有关排序，请参阅：http://johnny.github.io/jquery-sortable/|888075|var+draggable+=+$('#dragit');+//element+

draggable.on('mousedown',+function(e){
	var+dr+=+$(this).addClass("drag").css("cursor","move");
	height+=+dr.outerHeight();
	width+=+dr.outerWidth();
	ypos+=+dr.offset().top+%2B+height+-+e.pageY,
	xpos+=+dr.offset().left+%2B+width+-+e.pageX;
	$(document.body).on('mousemove',+function(e){
		var+itop+=+e.pageY+%2B+ypos+-+height;
		var+ileft+=+e.pageX+%2B+xpos+-+width;
		if(dr.hasClass("drag")){
			dr.offset({top:+itop,left:+ileft});
		}
	}).on('mouseup',+function(e){
			dr.removeClass("drag");
	});
});|code-block|syntax|javascript|888076|#dragit
++{
++++background:+red;
++++width:+50px;
++++height:+50px;
++++cursor:+move;
++++position:+relative;
++}|888077|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div+id="dragit">Drag+me</div>|888078|​|888079|约束移动|888080|888081|var+draggable+=+$('#dragit-contained');+//element+

draggable.on('mousedown',+function(e){
	var+dr+=+$(this).addClass("drag").css("cursor","move");
	height+=+dr.outerHeight();
	width+=+dr.outerWidth();
	max_left+=+dr.parent().offset().left+%2B+dr.parent().width()+-+dr.width();
	max_top+=+dr.parent().offset().top+%2B+dr.parent().height()+-+dr.height();
	min_left+=+dr.parent().offset().left;
	min_top+=+dr.parent().offset().top;

	ypos+=+dr.offset().top+%2B+height+-+e.pageY,
	xpos+=+dr.offset().left+%2B+width+-+e.pageX;
	$(document.body).on('mousemove',+function(e){
		var+itop+=+e.pageY+%2B+ypos+-+height;
		var+ileft+=+e.pageX+%2B+xpos+-+width;
		
		if(dr.hasClass("drag")){
			if(itop+<=+min_top+)+{+itop+=+min_top;+}
			if(ileft+<=+min_left+)+{+ileft+=+min_left;+}
			if(itop+>=+max_top+)+{+itop+=+max_top;+}
			if(ileft+>=+max_left+)+{+ileft+=+max_left;+}
			dr.offset({+top:+itop,left:+ileft});
		}
	}).on('mouseup',+function(e){
			dr.removeClass("drag");
	});
});|888082|.draggable-area
++{
++++background:+grey;
++++width:+320px;
++++height:+240px;
++}
#dragit-contained
++{
++++background:+red;
++++width:+50px;
++++height:+50px;
++++cursor:+move;
++++position:+relative;
++}|888083|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div+class="draggable-area">
	<div+id="dragit-contained">Drag+me</div>
</div>|888084|888085|entityMap|0|LINK|mutability|MUTABLE|url|https://www.sanwebe.com/2014/10/draggable-element-with-jquery-no-jquery-ui|1|http://johnny.github.io/jquery-sortable/^0|5|22|0|0|9|14|1|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|D|3|E|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|F|3|G|5|H|7|1I|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|1J|8|@]|9|@]|C|$I|J]]|$1|M|3|N|5|H|7|1K|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1L|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1M|8|@]|9|@]|C|$]]|$1|S|3|P|5|6|7|1N|8|@]|9|@]|C|$]]|$1|T|3|U|5|H|7|1O|8|@]|9|@]|C|$I|J]]|$1|V|3|W|5|H|7|1P|8|@]|9|@]|C|$I|J]]|$1|X|3|Y|5|H|7|1Q|8|@]|9|@]|C|$I|J]]|$1|Z|3|P|5|6|7|1R|8|@]|9|@]|C|$]]|$1|10|3|-4|5|6|7|1S|8|@]|9|@]|C|$]]]|11|$12|$5|13|14|15|C|$16|17]]|18|$5|13|14|15|C|$16|19]]]]

<p>Answer based on: <a href="https://www.sanwebe.com/2014/10/draggable-element-with-jquery-no-jquery-ui" rel="nofollow noreferrer">https://www.sanwebe.com/2014/10/draggable-element-with-jquery-no-jquery-ui</a></p>

<p>for sorting perhaps see: <a href="http://johnny.github.io/jquery-sortable/" rel="nofollow noreferrer">http://johnny.github.io/jquery-sortable/</a>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var draggable = $('#dragit'); //element 

draggable.on('mousedown', function(e){
	var dr = $(this).addClass("drag").css("cursor","move");
	height = dr.outerHeight();
	width = dr.outerWidth();
	ypos = dr.offset().top + height - e.pageY,
	xpos = dr.offset().left + width - e.pageX;
	$(document.body).on('mousemove', function(e){
		var itop = e.pageY + ypos - height;
		var ileft = e.pageX + xpos - width;
		if(dr.hasClass("drag")){
			dr.offset({top: itop,left: ileft});
		}
	}).on('mouseup', function(e){
			dr.removeClass("drag");
	});
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#dragit
  {
    background: red;
    width: 50px;
    height: 50px;
    cursor: move;
    position: relative;
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="dragit"&gt;Drag me&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<h2>Constrain movement</h2>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var draggable = $('#dragit-contained'); //element 

draggable.on('mousedown', function(e){
	var dr = $(this).addClass("drag").css("cursor","move");
	height = dr.outerHeight();
	width = dr.outerWidth();
	max_left = dr.parent().offset().left + dr.parent().width() - dr.width();
	max_top = dr.parent().offset().top + dr.parent().height() - dr.height();
	min_left = dr.parent().offset().left;
	min_top = dr.parent().offset().top;

	ypos = dr.offset().top + height - e.pageY,
	xpos = dr.offset().left + width - e.pageX;
	$(document.body).on('mousemove', function(e){
		var itop = e.pageY + ypos - height;
		var ileft = e.pageX + xpos - width;
		
		if(dr.hasClass("drag")){
			if(itop &lt;= min_top ) { itop = min_top; }
			if(ileft &lt;= min_left ) { ileft = min_left; }
			if(itop &gt;= max_top ) { itop = max_top; }
			if(ileft &gt;= max_left ) { ileft = max_left; }
			dr.offset({ top: itop,left: ileft});
		}
	}).on('mouseup', function(e){
			dr.removeClass("drag");
	});
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.draggable-area
  {
    background: grey;
    width: 320px;
    height: 240px;
  }
#dragit-contained
  {
    background: red;
    width: 50px;
    height: 50px;
    cursor: move;
    position: relative;
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="draggable-area"&gt;
	&lt;div id="dragit-contained"&gt;Drag me&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|675810|text|我知道这是一个古老的帖子，但我也有兴趣在没有Jquery+UI的情况下做到这一点。我检查了上面的链接，but+i+found+this+to+be+the+best。它只有8kb+(我读到的UI排序大约是30)，并且独立于任何庞大的JQuery库(尽管这些库有时可以让我们的生活更轻松)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|675811|entityMap|0|LINK|mutability|MUTABLE|url|http://dragsort.codeplex.com/^0|1F|V|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>I understand this is an old post, but i was also interested in doing this without Jquery UI. I checked the links above, <a href="http://dragsort.codeplex.com/" rel="nofollow">but i found this to be the best</a>. It's only 8kb minified (UI sortable ~30, i've read), and is independent of any mammoth JQuery library (although those CAN make our lives easier sometimes).</p>


<p>I searched a lot to find a tutorial for drag &amp; drop with jQuery alone (without UI), but due to the popularity of JQuery UI, all drag and drop features are based on JQuery UI.</p>

<p>Can anyone give me a hint how to make a basic Drag &amp; Drop by JQuery standalone?</p>


Drag and drop without JQuery UI

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我搜索了很多关于单独使用jQuery (没有UI)的拖放教程，但是由于JQuery UI的流行，所有的拖放功能都是基于JQuery UI的。有没有人能给我一个提示，如何用JQuery独立做一个基本的拖放？

问不使用JQuery UI进行拖放
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不使用JQuery UI进行拖放EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不使用JQuery UI进行拖放
EN