divに画像を移動してテキストを折り返す

Question

私はインターウェブとさまざまなJavaScriptサイトを調べて、JavaScript言語とapisも調べています。私の最終的な目標は、JQueryのドラッグ・アンド・ドロップのようなドラッグ可能なイメージを、テキストでいっぱいになったdivにドラッグし、テキストをラップすることです。これを機能的に、あるいはどこかに飛び越えるライブラリやAPIがありますか？私は現在、divを移動するのに役立つJQueryのソート可能なものを使用していますが、div内の画像を移動する機能はありません。

はちょうど参考のために、 http://jqueryui.com/demos/sortable/#portlets

Answer 1

のいくつかの並べ替えをでっち上げることができるかもしれない、お時間 -D

をありがとうCkEditorやTinyMCEのようなエディタを使ってjqueryのドラッグ・アンド・ドロップ機能と組み合わせます。

ドロップ時に、適切なエディターイベントが発生し、キャレットポイントに画像が追加されます。

Answer 2

は、あなたが試みることができるjqueryuiドラッグ/ドロップ可能& jqslickwrapハイブリッド

Answer 3

私のブログでは面白いことがあり、いくつかのトレイルとエラーがありました。誰かがそれからjqueryのプラグインを作ることができたら？ 画像とテキストはdiv内にある必要があります。それを参照してくださいhereを参照してください。

1.Wordには座標がないため、各単語をhtmlタグで囲む必要があります。これはテキストをたくさん増やします!!!

var text=$('div#text').text(); 
var arr=text.split(" "); 
for(var i=0;i<arr.length;i++){ 
    arr[i]="<span id='t'>"+arr[i]+"</span>"; 
    } 
text=arr.join(" "); 
$('div#text').html(function(){return text;}); 

2.画像を配置します。 3.画像のdivの座標とサイズを取得し、いくつかの変数を宣言します。

var temp=$("div#img"); 
var pos=temp.offset(); 
var imgleft=parseInt(pos.left); 
var imgtop=parseInt(pos.top); 
var imgwidth=temp.width(); 
var imgheight=temp.height(); 
var latesttop=$("div#text").offset().top; 
var spanleft,spantop,spanwidth,spanheight,latestleft,latestwidth; 

4.各単語タグをウォークスルーします。イメージに突き出た単語を見つけます。単語の終わりから画像の右端までの距離を計算し、特定の幅のdivをプレースホルダとして配置します。

$("span#t").each(function(index){ 
      pos=$(this).offset(); 
      spanleft=parseInt(pos.left); 
      spantop=parseInt(pos.top); 
      spanwidth=$(this).width(); 
      spanheight=$(this).height(); 
      if(spantop+spanheight>imgtop 
      && spantop<imgtop+imgheight 
      && spanleft+spanwidth>imgleft 
      && spanleft<imgleft+imgwidth){ 
       if(latesttop!=spantop){ 
       latestleft=0; 
       latestwidth=0; 
       } 
       var spacewidth=15+imgwidth+imgleft-latestleft-latestwidth; 
       $(this).before("<div id='t' style='display:inline-block;width:"+spacewidth+"px'></div>"); 
       } 
      latesttop=spantop; 
      latestleft=spanleft; 
      latestwidth=spanwidth;  
      }); 

5.終了時に単語の折り返しが行われます。

$('span#t').replaceWith(function(){ 
      return $(this).contents(); 
      });