jquery UIをドラッグ＆ドロップする要素をどのように作成するのですか？

Jquery UIを使用してWebサイトビルダーアプリケーションを構築しようとしています。私はデスクトップビューでこれを行うことができますが、今は同じテンプレートをタブレットとモバイルレスポンスビューに変換したいと思っています。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/

出典

2017-10-25 Puneeth Kumar

CSSセレクタで！importantを使用すると、インラインスタイリングよりも優先されます。そのため、メディアクエリ（https://css-tricks.com/snippets/css/media-queries-for-standard-devices/）を使用して、関連する要素の既存のクラスをオーバーライドし、その位置を設定できるようにする必要があります相対的に... – Toby

どのように幅、高さ、上と左をそれぞれモバイルとタブレットに変換できますか？変換する数式やロジックはありますか？ @Toby –

あなたが達成しようとしているレイアウトについてもっと知らないと言うのは難しいです。実際に画面の大きさに応じて配置する場合は、絶対値の代わりにCSSでパーセントを使用できます。幅、高さ、上端、左端はすべてサイズによって異なります。それはあなたが欲しいものですか？ - @Toby – Toby

応答設計のための良いスタートではありません。あなたがそれを書き直すのでなければ、そのために道に沿って多くの問題を見つけることに気づくべきです。

あなたの現在の絶対値を各デバイスに必要なもので上書きするために、あなたのCSSでモバイル/タブレット/ノートパソコンの画面サイズにはmedia queriesを使用することができます。

touchpunchのようなライブラリを使用する必要があります.jquery UIがタッチイベントをうまく処理しないことがあるためです。

出典

2017-10-25 09:08:54 Antonis

要素の幅と位置は自動的に変更されますか？ @ Antonis –

@PuneethKumarはい。メディアクエリの条件が満たされると、ブラウザはメディアクエリに記述されたプロパティを使用します。 W3 Schoolsの[this]（https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery）の例を参考にしてください。 – Antonis

私は------デスクトップについて------ の性質を有する画像があります...私が望むまさにあなた＃1 free_image171446 { 幅を例を与える：891pxを。身長：325px; ポジション：絶対; 左：34.5px; トップ：133px; z-インデックス：100009; } -------タブレットの場合------ ＃free_image171446 { 幅：764px; 身長：278.6px; 左：0ピクセル。トップ：133px; } -------モバイルの場合------- ＃free_image171446 { 幅：320px; 身長：116.72ピクセル; 左：0ピクセル。トップ：283px; } このように動的に変換する必要があります。 –

jquery UIをドラッグ＆ドロップする要素をどのように作成するのですか？

答えて

関連する問題