javascript - 可拖动元素-6ren

javascript - 可拖动元素

转载作者：行者123 更新时间：2023-11-28 07:32:21

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DRAG & DROP</title>

    <script type="text/javascript">
//<![CDATA[
//try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"e249f4e174edf7af03a74bc76c145d98",petok:"4a10f38bb2d4b46c1cff3e9e6e64e00d2795f082-1436193605-1800",zone:"oc-static.com",rocket:"0",apps:{}}];CloudFlare.push({"apps":{"ape":"4a1bcba3f7297e6bc2869c4a33323412"}});!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=7e13c32551/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>
<style>
      .dropper {
		  display: inline-block;
          margin: 50px 10px 10px 50px;
		  vertical-align: top;
          background-color: #555;
          border: 1px solid #111;
          
          -moz-border-radius: 10px;
          border-radius: 10px;
          
          -moz-transition: all 200ms linear;
          -webkit-transition: all 200ms linear;
          -o-transition: all 200ms linear;
          transition: all 200ms linear;
      }

      .drop_hover {
          -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) inset;
          box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) inset;
      }

      .draggable {
          display: inline-block;
          margin: 20px 10px 10px 20px;
          padding-top: 20px;
          width: 60px;
          height: 30px;
          color: #3D110F;
          background-color: #822520;
          border: 4px solid #3D110F;
          text-align: center;
          font-size: 1em;
          cursor: move;
          
          -moz-transition: all 200ms linear;
          -webkit-transition: all 200ms linear;
          -o-transition: all 200ms linear;
          transition: all 200ms linear;
          
          -moz-user-select: none;
          -khtml-user-select: none;
          -webkit-user-select: none;
          user-select: none;
      }
    </style>
  </head>

  <body>
	
	 <div class="dropper">
       
        <div class="draggable">Block1</div>
        <div class="draggable">Block2</div>
        <div class="draggable">Block3</div>

		
    </div>
	
	<div class="dropper">

      
    </div>

	<script>
	var x=document.querySelectorAll('.dropper');
		x[0].style.height="600px";
		x[0].style.width="200px";
		
		
		x[1].style.height="600px";
		x[1].style.width="999px";
		
   </script>



    <script>
    (function() {
    
    var dndHandler = {
        
        draggedElement: null, // Propriété pointant vers l'élément en cours de déplacement
        
        applyDragEvents: function(element) {
            
            element.draggable = true;

            var dndHandler = this; // Cette variable est nécessaire pour que l'événement « dragstart » ci-dessous accède facilement au namespace « dndHandler »
            
            element.addEventListener('dragstart', function(e) {
                dndHandler.draggedElement = e.target; // On sauvegarde l'élément en cours de déplacement
                e.dataTransfer.setData('text/plain', ''); // Nécessaire pour Firefox
				
			}, false);
            
        },
 
        applyDropEvents: function(dropper) {
            
            dropper.addEventListener('dragover', function(e) {
                e.preventDefault(); // On autorise le drop d'éléments
                this.className = 'dropper drop_hover'; // Et on applique le style adéquat à notre zone de drop quand un élément la survole
            }, false);
            
            dropper.addEventListener('dragleave', function() {
                this.className = 'dropper'; // On revient au style de base lorsque l'élément quitte la zone de drop
            });
            
            var dndHandler = this; // Cette variable est nécessaire pour que l'événement « drop » ci-dessous accède facilement au namespace « dndHandler »

            dropper.addEventListener('drop', function(e) {

                var target = e.target,
                    draggedElement = dndHandler.draggedElement, // Récupération de l'élément concerné
                    clonedElement = draggedElement.cloneNode(true); // On créé immédiatement le clone de cet élément
                
                while (target.className.indexOf('dropper') == -1) { // Cette boucle permet de remonter jusqu'à la zone de drop parente
                    target = target.parentNode;
                }

                target.className = 'dropper'; // Application du style par défaut
                
                clonedElement = target.appendChild(clonedElement); // Ajout de l'élément cloné à la zone de drop actuelle
                dndHandler.applyDragEvents(clonedElement); // Nouvelle application des événements qui ont été perdus lors du cloneNode()
                
                draggedElement.parentNode.removeChild(clonedElement);				// Suppression de l'élément d'origine
                
            });
            
        }
 
    };
    
    var elements = document.querySelectorAll('.draggable'),
        elementsLen = elements.length;
    
    for (var i = 0 ; i < elementsLen ; i++) {
        dndHandler.applyDragEvents(elements[i]); // Application des paramètres nécessaires aux éléments déplaçables
    }
    
    var droppers = document.querySelectorAll('.dropper'),

        droppersLen = droppers.length;
    
    //for (var i = 0 ; i < droppersLen ; i++) {
        dndHandler.applyDropEvents(droppers[1]); // Application des événements nécessaires aux zones de drop
    //}

	})();
    </script>

  </body>
</html>

我开始使用 html/css/jquery/jscript 进行编程。我不得不做两个街区。我们可以从左边的 block 中拖动元素，将它们放在右边的 block 上。而我们不能反其道而行之。除此之外，拖动时不会删除左侧的元素。这是我的代码:

(function() {

            var dndHandler = {

                draggedElement: null, // Propriété pointant vers l'élément en cours de déplacement

                applyDragEvents: function(element) {

                    element.draggable = true;

                    var dndHandler = this; // Cette variable est nécessaire pour que l'événement « dragstart » ci-dessous accède facilement au namespace « dndHandler »

                    element.addEventListener('dragstart', function(e) {
                        dndHandler.draggedElement = e.target; // On sauvegarde l'élément en cours de déplacement
                        e.dataTransfer.setData('text/plain', ''); // Nécessaire pour Firefox
                    }, false);

                },

                applyDropEvents: function(dropper) {

                    dropper.addEventListener('dragover', function(e) {
                        e.preventDefault(); // On autorise le drop d'éléments
                        this.className = 'dropper drop_hover'; // Et on applique le style adéquat à notre zone de drop quand un élément la survole
                    }, false);

                    dropper.addEventListener('dragleave', function() {
                        this.className = 'dropper'; // On revient au style de base lorsque l'élément quitte la zone de drop
                    });

                    var dndHandler = this; // Cette variable est nécessaire pour que l'événement « drop » ci-dessous accède facilement au namespace « dndHandler »

                    dropper.addEventListener('drop', function(e) {

                        var target = e.target,
                        draggedElement = dndHandler.draggedElement, // Récupération de l'élément concerné
                        clonedElement = draggedElement.cloneNode(true); // On créé immédiatement le clone de cet élément

                        while (target.className.indexOf('dropper') == -1) { // Cette boucle permet de remonter jusqu'à la zone de drop parente
                            target = target.parentNode;
                        }

                        target.className = 'dropper'; // Application du style par défaut

                        clonedElement = target.appendChild(clonedElement); // Ajout de l'élément cloné à la zone de drop actuelle
                        dndHandler.applyDragEvents(clonedElement); // Nouvelle application des événements qui ont été perdus lors du cloneNode()

                        draggedElement.parentNode.removeChild(clonedElement); // Suppression de l'élément d'origine

                    });

                }

            };

            var elements = document.querySelectorAll('.draggable'),
            elementsLen = elements.length;

            for (var i = 0 ; i < elementsLen ; i++) {
                dndHandler.applyDragEvents(elements[i]); // Application des paramètres nécessaires aux éléments déplaçables
            }

            var droppers = document.querySelectorAll('.dropper'),

            droppersLen = droppers.length;

            //for (var i = 0 ; i < droppersLen ; i++) {
                dndHandler.applyDropEvents(droppers[1]); // Application des événements nécessaires aux zones de drop
            //}

        })();}

我的问题是当元素位于正确的 block 中时，它们被定位为内联 block 。我希望能够将它们拖到 block 中我想要的任何位置。我找到了一种方法，可以让我的元素随心所欲地拖动。但它也应用于左侧 block :

$(function() {
    $( "#dg1" ).draggable();            
});

我想要的是:当元素位于左侧 block 时，它们保持内联 block 。当我将它们拖到正确的 block 时，我希望能够将它们放在该 block 中我想要的任何位置。

希望我的问题足够清楚，感谢您的回答!

$(function(){
				$('.draggable').draggable({
					revert: 'invalid',
					opacity: 0.35,
					helper: function(){
						return $(this).clone().appendTo('#drop_in').css({'zIndex':5});
					},
					cursor: 'move',
					//containment: '#drop_in'
					
					
				});
				
				$('#drop_in').droppable({
					activeClass: 'ui-state-hover',
					accept: '.draggable',
					drop: function(event, ui){
						if (!ui.draggable.hasClass("dropped"))
							$(this).append($(ui.draggable).clone().addClass("dropped").draggable({containment: '#drop_in'}));
					}
				});
				
				
			});

.draggable{
				
				font-family: Tahoma, Geneva, sans-serif;
				-webkit-border-radius: 15px;
				-moz-border-radius: 15px;
				border-radius: 15px;
				border: 1p solid #999;
				background: white;
				
				width: 100px; height: 50px;
				text-align: center;
				margin: 20px 10px 10px 10px;
				padding-top: 20px;
			}
		
		
			.dropper{
				
				-webkit-border-radius: 15px;
				-moz-border-radius: 15px;
				border-radius: 15px;
				border: 1p solid #999;
				background: -webkit-linear-gradient(left,#CCCCCC,#EEEEEE);
				background: -moz-linear-gradient(#CCCCCC, #EEEEEE);
				width: 600px; height: 200px;
				padding-top: 20px;
			}

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title> Droppable </title>
		
		<script src="//code.jquery.com/jquery-1.10.2.js"></script>
		<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
	
	<body>
		<div class="dropper" id="drag_from">
			<div class="draggable">Drag me!</div>
			<div class="draggable">Drag me too!</div>
		</div>
		
		<div class="dropper" id="drop_in">
		</div>
	</body>
	
	
</html>

我的问题是，当我拖动元素并将其放入滴管中时，它并没有落在鼠标放置的位置。但是在下降之后我可以操纵它并改变它的位置。如何在我的代码中更改它？

最佳答案

您测试过 Draggabilly 插件吗？它很棒而且功能齐全。我觉得你的问题可以用它的一些方法解决

http://draggabilly.desandro.com/

您可以在网格、父元素、拖动限制和事件操作上拖动。

祝你好运!

关于javascript - 可拖动元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31432949/

文章推荐： html - 用于在 IE11 中不可单击的表单中输入的图像标签

拖动 gridstack 卡时滚动内容
我正在使用 gridstack 来显示我的小部件。拖动和调整大小适用于 gridstack 卡，但当我将卡拖到底部时，卡的容器不会滚动。我想在拖动卡片时滚动那个容器。该容器只是一个 div 元素，所有
Flutter:使用手势检测器禁用多点触控/拖动
我目前正在构建一个多个处理的 slider 小部件，并且目前正在实现手势检测器。我有一个问题，如果您用第二根手指触摸/拖动屏幕，检测器会识别它并调用 onDragUpdate 函数，这是我试图禁用的功
AngularJS ng 拖动
我是 AngularJS 的新手，我对当前的项目有点压力，这就是我在这里问的原因。我看到 AngularJS 有 ng-dragstart 事件( http://docs.ng.dart.ant.c
JavaScript 图像缩放和平移(拖动)
关于缩放大图像和平移有什么建议吗？最好内联在页面上。我一直在使用PanoJS(又名GSV2)，但是现在越来越多的人使用iPhone/iPad/Android类型的设备，这个库要么太慢，要么旧版本不支
java - 拖动 JPanel
我在尝试拖动 JPanel 时遇到问题。如果我纯粹在 MouseDragged 中将其实现为: public void mouseDragged(MouseEvent me) { me.getS
android - 拖动/移动后将按钮移回原点
我有一个需要与屏幕底部对齐的 ImageButton，当我单击并拖动它时，它会随着我的手指移动一定距离，超过该距离它不会远离原点，而是继续跟随我的手指从原点开始的方向。当我松手时，按钮必须滑回原点。
android - 拖动 TextView
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
android - 拖动，缩放没有矩阵android的imageview
我需要一个解决方案来实现拖动和缩放，在不使用矩阵的情况下围绕屏幕 onTouch 事件路由 ImageView。我搜索了很多但所有答案都是用矩阵完成的，因为我在屏幕矩阵中有多个对象不适合我，我想拖动和
ios - 拖动 UIView
我需要一些帮助来拖动 UIView 以显示主视图下方的菜单 View 。我有两个 UIView。menuView - 包括菜单按钮和标签和 mainView - 位于 menuView 之上。我
javascript - 谷歌地图即使在实现后也不可拖动/拖动
谷歌地图即使设为 true 也不可拖动/拖动。重现步骤:在新选项卡中加载带有 map 的页面，检查并在不执行任何操作的情况下转到移动 View 。现在在移动 View 中左右上下拖动 map ，它将
Android在ImageView上缩放、拖动、绘制
我在绘制和缩放 ImageView 时遇到问题。请帮帮我.. 当我画一些东西然后拖动或缩放图像时 - 绘图保留在原处，如您在屏幕截图中所见。而且我只需要简单地在图片上绘图，并且可以缩放和拖动这张图片。
c# - 尝试模拟鼠标点击/拖动
所以我试图模拟鼠标左键单击和鼠标左键释放来执行一些自动拖放操作。它目前在 C# Winforms(是的，winforms :|)中并且有点笨拙。基本上，一旦发送了点击，我希望它根据 Kinect
html5 - 拖动 Canvas
我有一个巨大的 HTML5 Canvas，我希望它像谷歌地图一样工作:用户可以拖动它并始终只看到它的一小部分(屏幕大小)。它只呈现您在屏幕上可以看到的部分。我该怎么做？你有想法吗？最佳答案 2 个简
javascript - 如何为触摸和鼠标(拖动)事件制作可拖动元素
我有以下拖放应用程序代码，它在桌面上按预期工作，但是当我想在移动设备上使用该应用程序时，拖动事件无法按预期工作。我知道触摸事件是必需的，但我不确定如何设置它们和实现这些功能。 .object
reactjs - 禁用或启用 map 拖动
我正在使用 react-leaflet map ，我用状态改变了很多 map 属性，但是当使用状态来改变拖动属性时它不起作用。 { this.map = map}}
geometry - 拖动/移动多个选定功能-OpenLayers
我知道我可以轻松地允许用户在OpenLayers中选择多个功能/几何图形，但是随后我希望使用户能够轻松地同时拖动/移动所有选定的功能。使用ModifyFeature控件一次只能移动一个要素...是否
拖动 map 时MapControl Xaml元素滞后
我有一个 Windows Phone 运行时应用程序，我使用 xaml 在 map 上显示图钉。当我拖动 map 时，控件试图保持在相同位置时会出现一些滞后。任何帮助，将不胜感
jquery - 滚动可拖动项目的内容时禁用 jQuery 拖动
我通常不会提出此类问题/答案，但我想我会这样做，因为我已经看到这个问题被问了 20 多次，但没有一个答案真正有效。简而言之，问题是，如果您在可拖动 jQuery 项目内的任何位置有可滚动内容(over
uicollectionview - 拖动 UICollectionViewCell 时如何实现透明背景或圆角
我确信一定有一种简单的方法可以做到这一点，但到目前为止，我已经花了很长时间在各种兔子洞中没有成功。我有一个支持拖放的 Collection View 。被拖动的单元格有 UIImageView在 c
delphi - 虚拟 TreeView 拖动
如何在两个virtualtreeview之间复制以复制所有列，而不仅仅是第一列？复制前：复制后：最佳答案树控件不保存任何数据。它不包含要显示的列数据，因此无法复制它。而是，当树控件想要显示任何

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 可拖动元素