draggable 相关问题

我正在尝试对可排序 ul 中的一组照片重新排序；要以新顺序保存它们，我必须覆盖匹配的输入字段（名称和标题）：这是我的 ul 结构：我正在尝试对可排序的一组照片重新排序ul；要以新顺序保存它们，我必须覆盖匹配的输入字段（名称和标题）：这是我的ul结构： <ul class="float drag1"> <g:each in="${fotos}" var="foto" status="index" > <li class="float editimg 1" id="${index}"> <div class="float imgbox"> <span class="floatr imgdel" onclick="deletePicture('${foto.name}')" title="Löschen"></span> <img src="${di.createImageURL(bucket:'foo', name: foto.name, format:'m')}" alt="${foto.titel}" /> <g:hiddenField name="fotos[${index}].name" readonly="readonly" value="${foto.name}"/> </div> <input type="text" name="fotos[${index}].titel" class="fototitel" value="${foto.titel}"/> </li> </g:each> </ul> 这就是我的 JS <script type="text/javascript"> $( sort ); function sort() {$('.drag1').sortable({ update: function(event,ui) { var draggingElement = $(ui.item); var ordering = draggingElement.index(); var string1 = 'fotos['+ordering+'].name' ; var string2 = 'fotos['+ordering+'].titel' ; alert(string1+'---'+string2); //the following part doesn´t work, when i give those inputs unique id´s it work´s but i want this to be more self fulfilling. var inputs = draggingElement.getElementsByTagName("input"); inputs[0].attr('name',string1); inputs[1].attr('name',string2); } }); } </script> 警告 string1 和 string2 显示它们是正确的，我只需要更新输入的 name 属性。但在上面的例子中我得到了一个 typeError draggingElement.getElementsByTagName is not a function 我不知道如何获取 DraggingElement 的子输入。代替 var inputs = draggingElement.getElementsByTagName("input"); inputs[0].attr('name',string1); inputs[1].attr('name',string2); 试试这个 var inputs = draggingElement.find("input"); inputs.eq(0).attr('name',string1); inputs.eq(1).attr('name',string2); 我认为 getElementsByTagName 将为您提供 HTML 元素对象，而您需要 jQuery 元素对象 - 以便使用 attr 方法。检查 jQuery 手册以获得返回 jQuery 元素数组的正确方法，然后像您所做的那样使用数组访问方法，或者对它们运行 each 迭代器。（代表问题作者将答案移至答案空间。）这是满足我需要的脚本，感谢您的回答。 $( sort ); function sort() { $('.drag1').sortable({ update: function(event,ui) { var draggingElement = $('.editimg'); draggingElement.each(function() { var ordering = $(this).index(); var string1 = 'fotos['+ordering+'].name'; var string2 = 'fotos['+ordering+'].titel'; var inputs = $(this).find("input"); inputs.eq(0).attr('name',string1); inputs.eq(1).attr('name',string2); }); } }); };

jquery draggable jquery-ui-sortable children input-field

回答 3 投票 0

触发器：拖动时悬停选择器

我遇到了关于我目前正在开发的拖放系统的问题。我在 div 上有一个 :hover 样式，用户可以在上面放置一些东西。当我将鼠标悬停在它上面时它就可以工作，但不能...

jquery css drag-and-drop hover draggable

回答 2 投票 0

Flutter Draggable 如何不在悬停时插入数据？

我使用拖动目标和可拖动来创建拖放填充空白。我能够创建将可拖动对象放置到正确的拖动目标。当我拖动（悬停）另一个可拖动的 ov 时......

flutter dart draggable flutter-listview dragtarget

回答 1 投票 0

如何在React Native中实现这种拖放布局？

我想在React Native中实现拖放问答布局。我尝试过不同的库，但没有得到所需的输出。谁能向我建议如何实现这一点......

react-native drag-and-drop draggable drag

回答 1 投票 0

jquery-ui设置居中对齐元素可拖动时如何修复偏移？

这是垂直居中对齐元素可拖动的示例： #draggablediv { 宽度：100px；高度：100px；回来...</desc> <question vote="0"> <p>这是可拖动的垂直居中对齐元素<a href="https://codepen.io/tp1415926535/pen/oNaOePX" rel="nofollow noreferrer">示例</a>：</p> <pre><code><html> <head> <style> #draggablediv { width: 100px; height: 100px; background-color: yellow; position: absolute; margin: auto 0; top: 0; bottom: 0; } </style> </head> <body> <div id="draggablediv"></div> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $(function () { $("#draggablediv").draggable(); }); </script> </body> </html> </code></pre> <p>由于“margin: auto”，可拖动元素将不再准确设置顶部值。有没有办法让它正常工作？</p> </question> <answer tick="true" vote="0"> <p>这个问题可以分为两步解决：</p> <ul> <li>为了最初将元素垂直居中，我建议以这种方式使用 FlexBox：</li> </ul> <pre><code>/* to make sure that both document root & body take the whole vertical space */ html,body { height: 100%; display: flex; align-items: center; } </code></pre> <ul> <li>要修复顶部/底部错误的偏移，您应该删除</li> </ul> <pre><code>#draggablediv { ... ... /* remove these 2 lines:*/ top: 0; /* <--- this */ bottom: 0; /* <--- this */ ... } </code></pre> <p>这是<strong>众多建议之一</strong>，另一个建议（如果您不想触及正文和文档根目录），您可以使用另一个父 div 容器来应用相同的先前规则或也使用 JQuery 将元素居中。</p> </answer> </body></html>

html jquery jquery-ui draggable jquery-ui-draggable

回答 0 投票 0

如何使用 dnd-kit 独立于 React 中的可滚动可放置区域计算可拖动位置？

我使用 React 创建了一个触摸屏应用程序。我正在使用 dnd-kit 库来启用某些 div 的拖放功能。我有一个日历，其中日期是列，行是...

reactjs react-hooks draggable droppable dnd-kit

回答 1 投票 0

HTML/CSS 可拖动元素

美好的一天。我正在尝试使用非常简单的基于 HTML/CSS 的可拖动树表示构建一个应用程序。 ... 美好的一天。我正在尝试使用非常简单的基于 HTML/CSS 的可拖动树表示构建一个应用程序。 <div class="tree"> <div class="leaf" draggable=true> <div class="leaf-handle">item 1</div> <div class="leaf subleaf" draggable=true> <div class="leaf-handle">item 1.1</div> <div class="leaf subsubleaf" draggable=true> <div class="leaf-handle">item 1.1.1</div> </div> </div> </div> <div class="leaf" draggable=true> <div class="leaf-handle">item 2</div> <div class="leaf subleaf" draggable=true> <div class="leaf-handle">item 2.1</div> <div class="leaf subsubleaf" draggable=true> <div class="leaf-handle">item 2.1.1</div> </div> </div> </div> </div> 可以在此处找到重现该案例的代码示例： https://codepen.io/DerZinger/pen/bGQbEmd 我面临的问题是，当我尝试拖动分支（带有子项目的项目）时，“幽灵”图像（可拖动元素的表示）具有不透明的背景，无论我尝试什么，我都无法将其删除。像这样：而且我真的需要它是不可见的（鬼像仅显示当前拖动的分支的叶句柄）。任何关于如何实现这一目标的帮助或指导将非常感激。编辑1：有人建议删除背景颜色。尝试过，不幸的是这不起作用，这就是重点。删除它，将其设置为不透明，等等 - 所有这些技巧最终都不会“隐藏”我想要隐藏的区域：在针对您的问题测试了几种解决方法并进行了在线研究之后，我终于想出了一个不错的解决方案；不是完美的，但是当今最好的。代码： document.addEventListener("dragstart", function (event) { document.querySelector(".tree").style.backgroundColor = "transparent"; event.target.style.background = "transparent"; setTimeout(() => { document.querySelector(".tree").style.backgroundColor = "red"; event.target.style.background = "yellow"; }, 100); }); .leaf { background-color: yellow; width: 200px; } .leaf-handle { background-color: green; border: 1px solid black; } .tree { background-color: red; display: flex; flex-direction: column; } .subleaf { padding-left: 30px; } .subsubleaf { margin-left: 60px; } <div class="tree"> <div class="leaf" draggable="true"> <div class="leaf-handle">item 1</div> <div class="subleaf"> <div class="leaf-handle">item 1.1</div> <div class="subsubleaf"> <div class="leaf-handle">item 1.1.1</div> </div> </div> </div> <div class="leaf" draggable="true"> <div class="leaf-handle">item 2</div> <div class="leaf subleaf" draggable="true"> <div class="leaf-handle">item 2.1</div> <div class="leaf subsubleaf" draggable="true"> <div class="leaf-handle">item 2.1.1</div> </div> </div> </div> </div> <div class="tree"> <div class="leaf" draggable="true"> <div class="leaf-handle">item 1</div> <div class="leaf subleaf" draggable="true"> <div class="leaf-handle">item 1.1</div> <div class="leaf subsubleaf" draggable="true"> <div class="leaf-handle">item 1.1.1</div> </div> </div> </div> <div class="leaf" draggable="true"> <div class="leaf-handle">item 2</div> <div class="leaf subleaf" draggable="true"> <div class="leaf-handle">item 2.1</div> <div class="leaf subsubleaf" draggable="true"> <div class="leaf-handle">item 2.1.1</div> </div> </div> </div> </div>

html css draggable

回答 1 投票 0

Flutter 在拖动另一个小部件时更新小部件

我是 Flutter 新手，我正在尝试构建一个具有两个可拖动圆圈的应用程序，其中一条线从一个圆圈到另一个圆圈我设法做到了这一点，但在

flutter draggable

回答 1 投票 0

为反应对象动态添加类（拖动时）

我想将拖动的对象保留在其他对象的顶部。所以，我有 css basic.module.css .拖动架子{ z 索引：100； } 然后在函数中从“../css/basic.module.css&...”导入样式

reactjs draggable

回答 2 投票 0

React：如何创建可拖动的拖动手柄？

我无法找到有关如何使反应组件仅在单击拖动按钮时才可拖动的答案（单击元素内的任何内容都不会触发拖动事件）这是材料...

javascript css reactjs next.js draggable

回答 1 投票 0

如何使用自定义可拖动/拖动重影图像？

我已经红色并搜索了很多帖子的答案，但仍然找不到可以回答我的问题的答案。如何更改或使用可拖动元素的自定义重影图像？我红

javascript css draggable

回答 1 投票 0

如何限制在点击外部时关闭 showModalBottomSheet？

我有两个页面，正在使用 showModalBottomSheet 导航到第二个页面。在第二页上，我使用了 DraggableScrollableSheet。当文本表单字段为空时，我必须限制底部工作表

flutter dart draggable bottom-sheet

回答 2 投票 0

如何删除可拖动元素中的变换样式？

使用CDK拖放中的示例，我想添加左侧和顶部位置的拖动元素的预览，而无需变换样式。超文本标记语言 ... 使用 CDK 拖放中的示例，我想添加左侧和顶部位置的拖动元素的预览，而无需变换样式。 HTML <div class="example-boundary"> <div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag> I can only be dragged within the dotted container </div> </div> <button> Preview the dragged element </buttona> 打字稿 import {Component} from '@angular/core'; import {CdkDrag} from '@angular/cdk/drag-drop'; /** * @title Drag&Drop boundary */ @Component({ selector: 'cdk-drag-drop-boundary-example', templateUrl: 'cdk-drag-drop-boundary-example.html', styleUrls: ['cdk-drag-drop-boundary-example.css'], standalone: true, imports: [CdkDrag], }) export class CdkDragDropBoundaryExample {} 现状当你拖动元素时，DOM 中就会有这个 div <div _ngcontent-ng-c2320506461="" class="example-boundary"> <div _ngcontent-ng-c2320506461="" cdkdragboundary=".example-boundary" cdkdrag="" class="cdk-drag example-box" style="transform: translate3d(202px, -2px, 0px);"> I can only be dragged within the dotted container </div> </div> 预期结果当您拖动元素并单击预览按钮时，它应该打开预览元素，如下所示。 <div class="example-boundary"> <div class="example-box" style="left: 96.13%; top: 9.92%; display: block;"> Now I can't be dragged, sorry </div> </div> 意味着变换样式应该替换为左侧和顶部位置。 @angular/cdk/drag-drop内部使用变换属性来放置盒子。无论是使用top、left和position属性还是在封装的内部细节中使用transform，都应该理解为封装。使用这两种方法都可以获得相同的结果。如果您想对 top 和 left 属性执行任何特定操作，您可以根据 transform 和元素原始位置或纯 JS 中的代码拖动功能来计算它们。以下是你想要做的纯JS版本。 const box = document.querySelector('.example-box'); const boundary = document.querySelector(box.getAttribute('cdkDragBoundary') || ''); const posDisplay = document.querySelector('#pos'); const offset = { x: 0, y: 0 }; const onMouseMove = (e) => { e.preventDefault(); const [cx, cy] = [e.clientX, e.clientY]; const { width, height } = box.getBoundingClientRect(); let top = cy - offset.y; let left = cx - offset.x; const { width: bw, height: bh } = boundary?.getBoundingClientRect(); top = Math.min(top, (bh || innerHeight) - height); top = Math.max(top, 0); left = Math.min(left, (bw || innerWidth) - width); left = Math.max(left, 0); box.style.top = top + 'px'; box.style.left = left + 'px'; posDisplay.innerText = `left: ${left}px, top: ${top}px`; }; box.onmousedown = e => { e.preventDefault(); offset.x = e.clientX - box.offsetLeft; offset.y = e.clientY - box.offsetTop; window.onmousemove = onMouseMove; window.onmouseup = () => { window.onmousemove = null; window.onmouseup = null; }; } .example-boundary { position: relative; border: 1px dotted gray; width: 80vw; height: 80vh; margin: 0 10vmin; } .example-box { position: absolute; width: 200px; padding: 10px; border-radius: 10px; border: 1px solid green; cursor: grab; } #pos { height: 50px; padding: 0 10px; } <p id="pos">left: 0, top: 0</p> <div class="example-boundary"> <div class="example-box" cdkDragBoundary=".example-boundary"> I can only be dragged within the dotted container </div> </div> TLDR；我制作了以下两个工作示例，可以满足您的要求。在这两种情况下，top 和 left 位置都是使用以下正则表达式通过捕获组 1 和 2 transform:\s*translate3d$(.+?),(.+?),.+?$ 来计算的。克隆 DOM，这是我推荐的答案，它克隆 Angular 生成的 HTML 并手动删除不需要的属性。存储数据，按照您的要求，它将 DOM 位置、宽度、高度等存储在变量中，然后进行渲染。方法#1（克隆 DOM）以下代码克隆 Angular 生成的 HTML 并手动删除不需要的属性。代码中的注释中有更多详细信息。如果您只是想重新渲染拖到其他地方的内容，我个人建议使用此方法，因为它消除了管理属性的复杂性。 TS： /** * 1. Added a flag called `isPreviewShown` which toggles which HTML is visible, either the preview or the original * 2. Added a method called `showPreview` which clones the draggable contents and then manually removes unwanted attributes (you'll have to maintain this logic, so you may remove other attributes you don't need) * 3. Replaced `cssText` style attributes from `translate3d` to `top/left` values. I used the following [regular expression][2] for it `transform:\s*translate3d$(.+?),(.+?),.+?$` and the replaced it to `left:$1; top:$2` **/ isPreviewShown = false; showPreview() { // clone the contents this.previewContainer.nativeElement.innerHTML = this.exampleBoundary.nativeElement.innerHTML; // clear unwanted attributes document.querySelectorAll('.preview-container *').forEach((content: HTMLElement) => { const attrs = content.getAttributeNames(); for (var attr in attrs) { if ( attrs[attr].indexOf('cdk') !== -1 // <-- remove cdk related attributes || attrs[attr].indexOf('_ng') === 0 // <-- remove angular relates attributes || attrs[attr].indexOf('ng-') === 0 // <-- remove more angular relates attributes ) { console.log('->> removed: ', attrs[attr]) content.removeAttribute(attrs[attr]); } } // transform/translate3d --> top/left content.style.cssText = content.style.cssText.replace(/transform:\s*translate3d$(.+?),(.+?),.+?$/i, 'left:$1; top:$2') // remove cdk-drag class content.classList.remove('cdk-drag') }); console.log('>> Result: ', this.previewContainer.nativeElement.innerHTML) // show the preview this.isPreviewShown = true; this.cdr.detectChanges(); } HTML：  <div class="main-container"> <div class="example-boundary" #exampleBoundary> <div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag> I can only be dragged within the dotted container </div> </div> <div class="preview-container example-box" #previewContainer [hidden]="!isPreviewShown"> </div> </div> <br> <button (click)="hidePreview()" [hidden]="!isPreviewShown"> Hide preview element </button> <button (click)="showPreview()" [hidden]="isPreviewShown"> Preview the dragged element </button> CSS： /** * 1. Add `position: relative` to the `main-container` so the `preview-container` size and position are shown relative to the main container. * 2. Had to add `:host ::ng-deep` to class `.example-box` so the CSS can be shared by both preview and original content (an alternative to this, is to set all style attributes inline by using [`ngStyle`][4] so you'll don't need a css class) */ :host ::ng-deep .example-box { /* no changes here */ } .main-container { position: relative; width: 400px; height: 400px; } .preview-container { position: absolute; background: white; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1; } 方法#2（存储数据）这种方法完全按照您在注释中的要求，它将 DOM 位置、宽度、高度等存储在变量中，然后通过迭代变量来渲染它。如果您稍后要操作单个项目（例如添加拖动时不存在的可配置内容），那么这种方法会比 #1 更好。 TS： /** * 1. Added an interface called `IDragAndDropItem` with all the attributes that are going to be stored. * 2. Added a flag called `isPreviewShown` which toggles which HTML is visible, either the preview or the original * 3. Added a method called `showPreview` which iterates the first DOM level and stores the desired attributes in the array `previewItems` * 4. Computed the `top` and `left` values from the `cssText` style attribute, matched the following [regular expression][2] captured group 1 and 2: `transform:\s*translate3d$(.+?),(.+?),.+?$` */ export interface IDragAndDropItem { width: string; height: string; left: string | null; top: string | null; text: string; } isPreviewShown = false; previewItems: Array<IDragAndDropItem> = []; showPreview() { this.previewItems = []; // save the contents document .querySelectorAll('.example-boundary > *') // <-- purposely doesn't support nested DOM .forEach((content: HTMLElement) => { const position = content.style.cssText.match( /transform:\s*translate3d$(.+?),(.+?),.+?$/i ); this.previewItems.push({ width: content.offsetWidth + 'px', height: content.offsetHeight + 'px', left: position ? position[1] || null : null, top: position ? position[2] || null : null, text: content.innerText }) }); // show the preview this.isPreviewShown = true; this.cdr.detectChanges(); // show html this.resultHtml.nativeElement.innerText = this.previewContainer.nativeElement.innerHTML; } HTML：  <div class="main-container"> <div class="example-boundary" #exampleBoundary> <div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag> I can only be dragged within the dotted container </div> </div> <div class="preview-container example-boundary" #previewContainer [hidden]="!isPreviewShown"> <div class="preview-box" *ngFor="let item of previewItems" [ngStyle]="{left: item.left, top: item.top, width: item.width, height: item.height}"> {{ item.text }} </div> </div> </div> <br> <button (click)="hidePreview()" [hidden]="!isPreviewShown"> Hide preview element </button> <button (click)="showPreview()" [hidden]="isPreviewShown"> Preview the dragged element </button> CSS： /** * 1. Add `position: relative` to the `main-container` so the `preview-container` size and position are shown relative to the main container. * 2. Had to share styles from `example-box` with `preview-box`, otherwise every `style` attribute should be also stored. */ .example-box, .preview-box { /* no changes here */ } .main-container { position: relative; width: 400px; height: 400px; } .preview-container { position: absolute; background: white; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1; }

javascript css node.js draggable angular13

回答 2 投票 0

如何使用InteractJs使可拖动元素跟随触摸移动坐标上的光标

我在容器内有一个可拖动元素，并且仅限于其边界。我使用 InteractJs 来实现这个。可拖动元素默认隐藏，并在触摸开始时变得可见。然而我...

javascript draggable touch-event interactjs

回答 2 投票 0

webpack无法解析react-spring/web模块中的react-spring_core.legacy-esm.js

我的webpack.config.js const 路径 = require("路径"); const webpack = require("webpack"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const googleConfig = r...

javascript webpack drag-and-drop draggable react-spring

回答 1 投票 0

draggable 相关问题

最新问题