위치 속성을 절대적으로 갖는 jquery UI를 드래그 앤 드롭으로 반응시키는 방법?

Question

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/

Answer 1

는 반응 설계를위한 좋은 시작이 아니다. 당신이 그것을 다시 쓰지 않는 경우에, 당신은 그것 때문에 길 아래로 많은 문제를 발견 할 것임에 유의해야합니다.

지금 할 수있는 것은 휴대 전화/태블릿/노트북 화면 크기로 CSS에서 각 기기에 필요한 절대 값을 무시하기 위해 일부 media queries을 사용하는 것입니다.

때때로 jquery UI가 터치 이벤트를 잘 처리하지 못하기 때문에 touchpunch과 같은 라이브러리를 사용해야 할 수도 있습니다.