元素在页面加载后不可拖动。

huangapple
go评论107阅读模式
英文:

Element does not being draggable after page loaded

问题

当页面加载时，我创建了一些可拖动的对象。这是代码：

  1. let toolbar_items = document.getElementById('toolbar-items');
  2. for (let i = 0; i < items.length; i++) {
  3.     let htmlString = `
  4.         <div class="toolbar-item draggable ui-widget-content" id="i${items[i].item_id}_num0"> ${items[i].item_name} </div>
  5.     `;
  6.     let current = toolbar_items.innerHTML;
  7.     toolbar_items.innerHTML = current + htmlString;
  8.     if (i + 1 % 2 == 0) {
  9.         toolbar_items.innerHTML += "<br>";
  10.     }
  11. };

但是这是问题所在，我在 jQuery 事件中添加了另一个可拖动的项目，但它不起作用。我已经尝试了几个小时，但是没有解决。

这是我添加新元素的事件代码：

  1. $('.toolbar-item').on("mousedown", function(e) {
  2.     if ($(this).hasClass("toolbar-item-out")) return; 
  3.     
  4.     let id = $(this).attr('id');
  5.     let item_id = id.split('_')[0].split('i')[1];
  6.     let item_num = id.split('_')[1].split('num')[1];
  7.     let htmlString = `
  8.         <div class="toolbar-item draggable ui-widget-content" id="i${items[item_id].item_id}_num${item_num + 1}"> ${items[item_id].item_name} </div>
  9.     `;
  11.     $(htmlString).insertBefore($(`#${id}`));
  13.     // 我创建了与点击的相同的元素（更改了id），然后放置在上述代码的相同位置。
  14.     // 然后在下面的代码中，我将原始元素移到我的鼠标位置。
  15.     // 原始元素是可拖动的，所以我可以将其拖动到任何位置。
  16.     // 但是新生成的元素无法拖动。
  18.     $(this).prependTo('.area').attr('style', 'position: fixed !important; color: red;').offset({ top: e.pageY, left: e.pageX }).addClass("toolbar-item-out").addClass('z-index-10')
  19.         .on( "mouseup", function() {
  20.             $(this).removeClass('z-index-10');
  21.         });
  22. });
英文:

When page loads, I'm creating some objects which are draggable. This is the code:

  1. let toolbar_items = document.getElementById(&#39;toolbar-items&#39;);
  2. for (let i = 0; i &lt; items.length; i++) {
  3.     let htmlString = `
  4.         &lt;div class=&quot;toolbar-item draggable ui-widget-content&quot; id=&quot;i${items[i].item_id}_num0&quot;&gt; ${items[i].item_name} &lt;/div&gt;
  5.     `;
  6.     let current = toolbar_items.innerHTML;
  7.     toolbar_items.innerHTML = current + htmlString;
  8.     if (i + 1 % 2 == 0) {
  9.         toolbar_items.innerHTML += &quot;&lt;br&gt;&quot;;
  10.     }
  11. };

And this works completely fine. But this is the issue, I'm appending another draggable item in an jQuery event. That doesn't work. I'm trying to figure it out for like couple hours but I couldn't.

This is the code of event which I'm appending new element:

  1. $(`.toolbar-item`).on( &quot;mousedown&quot;, function(e) {
  2.     if ($(this).hasClass(&quot;toolbar-item-out&quot;)) return; 
  3.     
  4.     let id = $(this).attr(&#39;id&#39;);
  5.     let item_id = id.split(&#39;_&#39;)[0].split(&#39;i&#39;)[1];
  6.     let item_num = id.split(&#39;_&#39;)[1].split(&#39;num&#39;)[1];
  7.     let htmlString = `
  8.         &lt;div class=&quot;toolbar-item draggable ui-widget-content&quot; id=&quot;i${items[item_id].item_id}_num${item_num + 1}&quot;&gt; ${items[item_id].item_name} &lt;/div&gt;
  9.     `;
  11.     $(htmlString).insertBefore($(`#${id}`));
  13.     // I created the same element (which is clicked on it) with changing the id then placed in the 
  14.     // same position at the upper code.
  15.     // And at the code in the down, I&#39;m bringing the original element to my mouse position.
  16.     // The original element is draggable so I can drag it anywhere.
  17.     // But the new generated element doesn&#39;t able to drag.
  19.     $(this).prependTo(&#39;.area&#39;).attr(&#39;style&#39;, &#39;position: fixed !important; color: red;&#39;).offset({ top: e.pageY, left: e.pageX }).addClass(&quot;toolbar-item-out&quot;).addClass(&#39;z-index-10&#39;)
  20.         .on( &quot;mouseup&quot;, function() {
  21.             $(this).removeClass(&#39;z-index-10&#39;);
  22.         });
  23. });

元素在页面加载后不可拖动。
元素在页面加载后不可拖动。

I need help about this.

答案1

得分: 0

好的，以下是您要的翻译部分：

这是因为脚本正在加载，当我附加任何元素时，脚本已经加载，所以元素看不到脚本。

我是这样解决的：

首先，在我创建和附加新元素的地方，我添加了2行代码：

  1. let id = $(this).attr('id');
  2. let item_id = id.split('_')[0].split('i')[1];
  3. let item_num = id.split('_')[1].split('num')[1];
  4. let htmlString = `
  5.     <div class="toolbar-item draggable ui-widget-content" id="i${items[item_id].item_id}_num${item_num + 1}"> ${items[item_id].item_name} </div>
  6. `;
  7. $(htmlString).insertBefore($(`#${id}`));
  9. // 我添加了这两行代码
  10. let new_id = `i${items[item_id].item_id}_num${item_num + 1}`;
  11. $(`#${new_id}`).draggable();

现在我可以拖动新生成的项目。但仍然存在一个问题。当我拖动新生成的项目时，不会出现新项目。因为-就像我说的-脚本已经加载。

所以。

我将整个代码放入一个函数中，然后在附加元素后调用它。

这是最终的代码：

  1. function reload_event() {
  2.     $(`.toolbar-item`).on( "mousedown", function(e) {
  3.         if ($(this).hasClass("toolbar-item-out")) return; 
  4.         
  5.         let id = $(this).attr('id');
  6.         let item_id = id.split('_')[0].split('i')[1];
  7.         let item_num = id.split('_')[1].split('num')[1];
  8.         let htmlString = `
  9.             <div class="toolbar-item draggable ui-widget-content" id="i${items[item_id].item_id}_num${item_num + 1}"> ${items[item_id].item_name} </div>
  10.         `;
  11.         $(htmlString).insertBefore($(`#${id}`));
  12.         let new_id = `i${items[item_id].item_id}_num${item_num + 1}`;
  13.         $(`#${new_id}`).draggable();
  14.     
  15.         reload_event();
  16.     
  17.         $(this).prependTo('.area').attr('style', 'position: fixed !important; color: red;').offset({ top: e.pageY, left: e.pageX }).addClass("toolbar-item-out").addClass('z-index-10')
  18.             .on( "mouseup", function() {
  19.                 $(this).removeClass('z-index-10');
  20.             });
  21.     });
  22. }
  24. reload_event();

这个代码完美运行。

英文:

Ok. So...

This happens because scripts being loaded and when I append any element script has been already loaded so elements doesn't see the scripts.

This is how did I solved it:

First of all, at the where I create and append the new element I added 2 lines of codes:

  1.         let id = $(this).attr(&#39;id&#39;);
  2.         let item_id = id.split(&#39;_&#39;)[0].split(&#39;i&#39;)[1];
  3.         let item_num = id.split(&#39;_&#39;)[1].split(&#39;num&#39;)[1];
  4.         let htmlString = `
  5.             &lt;div class=&quot;toolbar-item draggable ui-widget-content&quot; id=&quot;i${items[item_id].item_id}_num${item_num + 1}&quot;&gt; ${items[item_id].item_name} &lt;/div&gt;
  6.         `;
  7.         $(htmlString).insertBefore($(`#${id}`));
  9.         // I ADDED THESE TWO CODES
  10.         let new_id = `i${items[item_id].item_id}_num${item_num + 1}`;
  11.         $(`#${new_id}`).draggable();

Now I can drag the new generated item. But there still a problem. When I drag the new generated item, there will not be any new item. Because -like I said- script is already loaded.

SO.

I put the whole code in a function then I called it after I append the element.

This is the final code:

  1. function reload_event() {
  2.     $(`.toolbar-item`).on( &quot;mousedown&quot;, function(e) {
  3.         if ($(this).hasClass(&quot;toolbar-item-out&quot;)) return; 
  4.         
  5.         let id = $(this).attr(&#39;id&#39;);
  6.         let item_id = id.split(&#39;_&#39;)[0].split(&#39;i&#39;)[1];
  7.         let item_num = id.split(&#39;_&#39;)[1].split(&#39;num&#39;)[1];
  8.         let htmlString = `
  9.             &lt;div class=&quot;toolbar-item draggable ui-widget-content&quot; id=&quot;i${items[item_id].item_id}_num${item_num + 1}&quot;&gt; ${items[item_id].item_name} &lt;/div&gt;
  10.         `;
  11.         $(htmlString).insertBefore($(`#${id}`));
  12.         let new_id = `i${items[item_id].item_id}_num${item_num + 1}`;
  13.         $(`#${new_id}`).draggable();
  14.     
  15.         reload_event();
  16.     
  17.         $(this).prependTo(&#39;.area&#39;).attr(&#39;style&#39;, &#39;position: fixed !important; color: red;&#39;).offset({ top: e.pageY, left: e.pageX }).addClass(&quot;toolbar-item-out&quot;).addClass(&#39;z-index-10&#39;)
  18.             .on( &quot;mouseup&quot;, function() {
  19.                 $(this).removeClass(&#39;z-index-10&#39;);
  20.             });
  21.     });
  22. }
  24. reload_event();

That works perfectly fine.

huangapple
  • 本文由 发表于 2023年7月4日 21:10:31
  • 转载请务必保留本文链接：https://go.coder-hub.com/76613005.html
  • javascript
  • jquery
  • jquery-ui
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定