如何使具有绝对位置属性的jquery UI拖放元素响应？答案

【问题标题】：How to make a jquery UI drag and drop element responsive which has position property absolute?如何使具有绝对位置属性的jquery UI拖放元素响应？
【发布时间】：2023-04-02 11:10:02
【问题描述】：

我正在尝试使用 Jquery UI 构建网站构建器应用程序。我可以为桌面视图执行此操作，但现在我想将相同的模板转换为平板电脑和移动响应视图。

下面是桌面视图的前端代码。

<div class="document-page ui-droppable" id="container-ground" style="position:relative;width:960px;height:1200px;">
 <div id="contactForm" class="right-column element ui-draggable ui-draggable-handle ui-resizable" onclick="showToolBar(this.id,&quot;Contact Form&quot;,event)" style="width: 425.017px; padding: 10px; position: absolute; left: 521.448px; top: 273.597px; z-index: 100001; height: 746.976px;">
    <div class="form-top">
       <h2 class="contact_title">
          <p>LEAD FORM</p>
       </h2>
       <h5 class="contact_desc">
          <p>Please add your details</p>
       </h5>
    </div>

 </div>
 <div id="footer" class="element textcontent footer_div ui-draggable ui-draggable-handle ui-resizable" onclick="showToolBar(this.id,&quot;Footer&quot;,event)" style="display: block; position: absolute; left: 0.989624px; top: 1181px; z-index: 100003; width: 960px; height: 98.507px;">
    <div id="copyright" class="subelement copyright footer_div1" ondblclick="edit(&quot;&quot;,this.id)" style="width:100%; text-align: center;" onclick="showMiniToolbar(this.id,event)">
       <p>Double Click To Edit</p>
    </div>
    <div id="links" onclick="showMiniToolbar(this.id,event)" class="subelement links footer_div1" style="text-align: center;">
       <ul style="display:block;" class="footer-menu">
          <li style="display:inline-block;margin-right:10px;"><a style="" href="http://192.168.1.32/landing/Homecontroller/frontend/homePage/59e0b3f0756d0fc6373c9869">Home</a></li>
          <li style="display:inline-block;margin-right:10px;"><a style="" href="http://192.168.1.32/landing/Homecontroller/frontend/cookie/59e0b3f0756d0fc6373c9869">Cookie Policy</a></li>
       </ul>
    </div>
 </div>
 <div class="element ui-draggable-dragging ui-draggable ui-draggable-handle ui-resizable" id="header_div" style="height: 145px; display: block; position: absolute; left: 0px; top: 47.7674px; z-index: 100002; width: 960px;" onclick="showToolBar(this.id,&quot;Header&quot;,event)">
    <div class="subelement header_column_logo ui-draggable ui-draggable-handle ui-resizable" id="header_column_logo" style="display: inline-block; position: absolute; left: 30.9791px; width: 200px; height: 75px; top: 33.9931px;" onclick="showHeaderToolbar(this.id)"><span class="logo-span" id="logo_span" data-content="Click to Upload Image" style="display:inline-block;" ondblclick="uploadImage(this.id);"><img id="header_image" class="header_image subelement" src="http://192.168.1.32/landing/uploads/uploaded_image_231017022917" style="height: 75px; width: 200px;"></span></div>
    <div class="free_text subelement ui-draggable ui-draggable-handle ui-resizable" id="header_text" onclick="showImageToolbar(this.id,event)" style="width: 249px; text-align: center; display: inline-block; position: absolute; left: 290.958px; top: 44.9861px;" ondblclick="showEditor(this.id)">
       <p>&nbsp;</p>
    </div>
    <div class="free_text subelement ui-draggable ui-draggable-handle ui-resizable" id="header_column_contact" onclick="showImageToolbar(this.id,event)" style="display: inline-block; width: 225px; position: absolute; left: 652.976px; top: 58.9757px;" ondblclick="showEditor(this.id)">
       <p>&nbsp;</p>
    </div>
 </div>
 <div class="free_text element ui-draggable-dragging ui-draggable ui-draggable-handle ui-resizable" onclick="showImageToolbar(this.id,event)" style="padding: 10px; text-align: center; position: absolute; left: 85.2119px; top: 302.719px; z-index: 100004; height: 67.7778px;" ondblclick="showEditor(this.id)" id="free_text171441">
    <span class="free_text171441">
       <p>TEXT1</p>
    </span>
 </div>
 <div class="free_text element ui-draggable-dragging ui-draggable ui-draggable-handle ui-resizable" onclick="showImageToolbar(this.id,event)" style="padding: 10px; text-align: center; position: absolute; left: 109.212px; top: 512px; z-index: 100005; height: 67.7778px;" ondblclick="showEditor(this.id)" id="free_text171442">
    <span class="free_text171442">
       <p>TEXT2</p>
    </span>
 </div>
 <div class="free_text element ui-draggable-dragging ui-draggable ui-draggable-handle ui-resizable" onclick="showImageToolbar(this.id,event)" style="padding: 10px; text-align: center; position: absolute; left: 362.212px; top: 333.719px; z-index: 100006; height: 67.7778px;" ondblclick="showEditor(this.id)" id="free_text171443">
    <span class="free_text171443">
       <p>TEXT3</p>
    </span>
 </div>
 <div class="element ui-draggable-dragging ui-draggable ui-draggable-handle ui-resizable" onclick="showImageToolbar(this.id,event)" style="width: 300px; height: 220px; overflow: hidden; position: absolute; left: 165.212px; top: 703.177px; z-index: 100007;" ondblclick="uploadImage(this.id);" id="free_image171444"><img src="http://192.168.1.32/landing/assets/images/no-image.jpg"></div>
 <div class="element ui-draggable ui-draggable-handle ui-resizable" onclick="showImageToolbar(this.id,event)" style="width: 300px; height: 220px; overflow: hidden; position: absolute; left: 594.931px; top: 546.375px; z-index: 100008;" ondblclick="uploadImage(this.id);" id="free_image171445"><img src="http://192.168.1.32/landing/assets/images/no-image.jpg"></div>
 <div class="element ui-draggable ui-draggable-handle ui-resizable" onclick="showImageToolbar(this.id,event)" style="width: 300px; height: 220px; overflow: hidden; position: absolute; left: 195.198px; top: 412.813px; z-index: 100009;" ondblclick="uploadImage(this.id);" id="free_image171446"><img src="http://192.168.1.32/landing/assets/images/no-image.jpg"></div>

所有样式都与绝对位置内联。那么如何将此代码转换为平板电脑和移动响应视图？

下面是所有元素的内联 CSS 的提取。

    #footer {
    display: block;
    position: absolute;
    left: 0.989624px;
    top: 1097.55px;
    z-index: 100003;
    width: 960px;
    height: 98.507px;
}
#header_div {
    height: 145px;
    display: block;
    position: absolute;
    left: 0px;
    top: 47.7674px;
    z-index: 100002;
    width: 960px;
}
#free_text171441 {
    padding: 10px;
    text-align: center;
    position: absolute;
    left: 85.2119px;
    top: 302.719px;
    z-index: 100004;
    height: 67.7778px;
}
#free_text171442 {
    padding: 10px;
    text-align: center;
    position: absolute;
    left: 109.212px;
    top: 512px;
    z-index: 100005;
    height: 67.7778px;
}
#free_text171443 {
    padding: 10px;
    text-align: center;
    position: absolute;
    left: 362.212px;
    top: 333.719px;
    z-index: 100006;
    height: 67.7778px;
}
#free_image171444 {
    width: 300px;
    height: 220px;
    overflow: hidden;
    position: absolute;
    left: 165.212px;
    top: 703.177px;
    z-index: 100007;
}
#free_image171445 {
    width: 300px;
    height: 220px;
    overflow: hidden;
    position: absolute;
    left: 0.989624px;
    top: 641.361px;
    z-index: 100008;
}
#free_image171446 {
    width: 300px;
    height: 220px;
    overflow: hidden;
    position: absolute;
    left: 195.198px;
    top: 412.813px;
    z-index: 100009;
}

现在我如何将宽度、高度、顶部和左侧分别转换为手机和平板电脑？有什么公式或逻辑可以转换吗？

我会给你一个我想要的例子......

有一个图像具有以下属性

For desktop
#free_image171446 {
    width: 891px;
    height: 325px;
    overflow: hidden;
    position: absolute;
    left: 34.5px;
    top: 133px;
    z-index: 100009;
}

For tablet
#free_image171446 {
    width: 764px;
    height: 278.6px;
    left: 0px;
    top: 133px;   
}

For Mobile
#free_image171446 {
    width: 320px;
    height: 116.72px;
    left: 0px;
    top: 283px;   
}

我需要像这样动态转换。

https://jsfiddle.net/4wkqm9rm/

【问题讨论】：

如果你在 css 选择器中使用 !important，它将胜过你的内联样式。因此，您应该能够使用媒体查询 (css-tricks.com/snippets/css/media-queries-for-standard-devices) 来覆盖所涉及元素的现有类，并将它们的位置设置为相对...
如何将宽度、高度、顶部和左侧分别转换为手机和平板电脑？是否有任何公式或逻辑可以转换？ @托比
如果不了解您要实现的布局，很难说。如果您真的希望根据屏幕大小按比例定位事物，那么您可以在 CSS 中使用百分比而不是绝对值。然后一切的宽度，高度，顶部和左侧将根据大小而变化。那是你要的吗？ @Puneeth
@Toby - 我会给你一个我到底想要什么的例子......有一个图像具有 For desktop #free_image171446 { width: 891px;高度：325px；溢出：隐藏；位置：绝对；左：34.5px；顶部：133px； z-index：100009； } 对于平板电脑 #free_image171446 { 宽度：764px;高度：278.6px；左：0px；顶部：133px； } 对于移动设备 #free_image171446 { 宽度：320px;高度：116.72px；左：0px；顶部：283 像素；我需要像这样动态转换。

标签： javascript html css jquery-ui responsive

【解决方案1】：

使用大小或定位的绝对属性对于响应式设计来说并不是一个好的开始。如果你不打算重写它，你应该记住，你会发现很多问题，因此。

您现在可以做的是在您的 CSS 中使用一些 media queries 用于移动/平板电脑/笔记本电脑的屏幕尺寸，以便用每个设备所需的绝对值覆盖您拥有的绝对值。

您可能还需要使用像 touchpunch 这样的库，因为有时 jquery ui 不能很好地处理触摸事件。

【讨论】：

元素的宽度和位置会自动改变吗？ @安东尼
@PuneethKumar 是的。一旦您的媒体查询条件为真，浏览器将使用媒体查询中描述的属性。试试 W3 Schools 的 this 示例，看看它是如何工作的。
我会给你一个我想要的例子......有一个图像具有 ------For desktop------ #free_image171446 { width: 891px 的属性;高度：325px；位置：绝对；左：34.5px；顶部：133px； z-index：100009； } --------对于平板电脑------ #free_image171446 { 宽度：764px;高度：278.6px；左：0px；顶部：133px； } -------对于移动设备------- #free_image171446 { 宽度：320px;高度：116.72px；左：0px；顶部：283 像素；我需要像这样动态转换。