0

そのため、複数のスパン タグを含む ap タグで -webkit-column-count を使用しています。各スパンには 1 文字が含まれます。

スパン タグの間には、ドラッグ可能な別のスパンがあり、ユーザーはそれをドラッグ アンド ドロップできます。

問題は、ユーザーが p タグの端にドロップしたときに始まります。

その場合、画像がフレームからはみ出してしまいます。

理由がわからない..

私が見ることの1つは、ドラッグ可能なスパンからz-indexを削除すると、突然うまく機能しますが、2番目のドラッグ可能なスパンがその位置から外れることです。

JSFiddleの例を見てください

これは私のHTMLコードです:

<div>
<p class="two_columns">
<span class="ui-draggable">&nbsp;</span>
Lorem ipsum sit amet, consectetur adipiscing sdfsdf consectetur adipiscing sdfsdf 
consectetur adipiscing sdfsdf elit. Praesent rhoncus tellus purus
<span class="ui-draggable">&nbsp;</span>, utfacilisis ipsum posu ere eget. Cras
susciconsectetur adipiscing sdfsdf consectetur adipiscing sdfsdfdio.</p>
</div>

そして、これは私のcssです：

div {
    width: 80%;
    margin: 20px auto;
}

p {
    overflow: visible !important;
    margin: 0;
    -webkit-column-count: 2;
}

.ui-draggable {
    text-indent: -9999px;
    display: inline !important;
    z-index: 100;
    cursor: pointer;
    position: relative;
    font-size: 0;
    line-height: 0;
}
.ui-draggable::after {
   position: absolute;
content: '';
width: 24px;
height: 30px;
background: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQLBPLYyDEATQHLjBBl5UD-pSD9PI5rv_EAElcSPT7HGk2LKSKeAVkgCa-o") no-repeat;
cursor: pointer;
left: -10px;
top: -20px;
background-size: 100%;
}
4

1 に答える 1

0

ui-draggable クラスに絶対配置された :after 疑似があります。これにより、画像がすべての上に浮くようになります (これは、絶対配置が行うことであり、既存のレイアウトの上に浮かびます)。

これを修正する 1 つの方法は、ui-draggable クラスに余白を追加して、アイコン用のスペースを作ることです。

margin: 0 15px 0 5px;

また、ほとんどのスパンにスタイリングがまったくないのに、なぜそんなに多くのスパンを使用しているのかについても心配しています。可能であれば、余分な部分を取り除くことを検討してください。通常、HTML 要素が少ないほど、物事を自然に動作させることが容易になります。

于 2013-11-11T17:39:11.947 に答える